无法在React JS中读取null的属性``查询'' [英] Cannot read property 'query' of null in react js
问题描述
我在react-redux流程中应用了分页，并尝试在"mapStateToProps"函数中获取查询参数，但低于错误- 调用浏览器的网址是- http://localhost:3000/blog-list?page_no = 1
i have applied pagination in react-redux process, and trying to get query parameter in "mapStateToProps" function but getting below error - calling browser url is - http://localhost:3000/blog-list?page_no=1
这是我组件的代码段-
import React from 'react';
import StaticLayout from '../Layout/StaticLayout';
import { getBlogList } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Pagination } from 'react-bootstrap';
import { push } from 'react-router-redux';
class BlogList extends React.Component {
constructor(props){
super(props);
document.title = "Blogs";
this.changePage = this.changePage.bind(this);
}
componentDidMount() {
this.props.getBlogList();
}
render(){
//===pagination variable========
const per_page = 1;
let pages = 0;
if(this.props.blogListData !== undefined){
pages = Math.ceil(this.props.blogListData.count / per_page) ;
}
const current_page = this.props.page;
const start_offset = (current_page - 1) * per_page;
let start_count = 0;
//===End pagination variable========
return(
<StaticLayout>
<html content with require list />
<Pagination className="users-pagination pull-right" bsSize="medium" maxButtons={10} first last next prev boundaryLinks items={pages} activePage={current_page} onSelect={this.changePage} />
</StaticLayout>
);
}
changePage(page){
this.props.dispatch(push('/?page_no='+page))
}
}
function mapStateToProps(state){
return {
blogListData: state.UserReducer.blogData,
page: Number(state.routing.locationBeforeTransitions.query.page_no) || 1,
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({getBlogList: getBlogList}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (BlogList);
请让我知道我在做什么错，因为在控制台中您可以看到它放弃了routing.locationBeforeTransitions.不是查询".
Please let me know what i am doing wrong, because in console you can see its giving up to routing.locationBeforeTransitions. not 'query'..
推荐答案
您需要配置React-router-redux才能使用state.routing.locationBeforeTransitions.query.page_no.但是，还有其他方法可以做到这一点.
You need to configure React-router-redux to be able to use state.routing.locationBeforeTransitions.query.page_no. However there are other ways to do it.
如果您使用的是我假设的React-router v4
If you are using React-router v4, which I am assuming
您需要使用一个支持查询解析的单独库，因为该库的支持已从react-router v4中撤消
You need to make use a separate library that supports query parsing, since its support was withdrawn from react-router v4
您可以使用 query-string npm软件包
You can make use of query-string npm package
您可以获得类似的数据
import queryString from 'query-string'
function mapStateToProps(state, ownProps){
var queryParam = queryString.parse(ownProps.location.search);
return {
blogListData: state.UserReducer.blogData,
page: Number(queryParam.get('page_no') || 1,
}
}
这篇关于无法在React JS中读取null的属性``查询''的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
