Reactjs Redux:mapStateToProps不会在状态更改时呈现组件 [英] Reactjs Redux:mapStateToProps not rendering the component on state change
本文介绍了Reactjs Redux:mapStateToProps不会在状态更改时呈现组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在同一组件上具有搜索过滤器并对输入进行排序.我正在使用 reselect(选择器包) ，其中对数据数组进行了过滤和排序. mapStateToProps会在每个搜索过滤器结果上更新组件，但对数组进行排序后，mapStateToProps不会更新组件.
I have search filter and sort inputs on the same component.I'm using reselect(selector package) where the data array is filtered and sorted. The mapStateToProps is updating the component on each search filter result.but the mapStateToProps is not updating the component after sorting the array.
selectors/index.js
selectors/index.js
import { createSelector } from 'reselect'
const getListOfCategory = (state) => state.products.product
const getSearchText = (state) => state.products.searchText
const getSortValue = (state) => state.products.sortValue
export const getVisibleCategory = createSelector(
[ getListOfCategory, getSearchText, getSortValue ],
(ListOfCategory, searchText, sortValue) =>{
if((searchText !== undefined) && (searchText !== null) && (searchText !== "")){
return ListOfCategory.filter((val) => val.modelname.toLowerCase().includes(searchText.toLowerCase())).sort((a, b) => {
if (sortValue === 'likes') {
return b.modellikes - a.modellikes;
}
if (sortValue === 'views') {
return b.modelviews - a.modelviews;
}
if (sortValue === 'brand') {
return a.modelname > b.modelname ? 1 : a.modelname < b.modelname ? -1 : 0;
}
});
}
if(sortValue){
return ListOfCategory.sort((a, b) => {
if (sortValue === 'likes') {
return b.modellikes - a.modellikes;
}
if (sortValue === 'views') {
return b.modelviews - a.modelviews;
}
if (sortValue === 'brand') {
return a.modelname > b.modelname ? 1 : a.modelname < b.modelname ? -1 : 0;
}
});
}
}
)
这是我的反应组件.
import React from 'react';
import {connect} from 'react-redux';
import {getCategoryInfo,search,sortBy} from '../actions/productActions';
import {getVisibleCategory} from '../selectors';
import {Link} from 'react-router-dom';
class SmartCategory extends React.Component{
constructor(props){
super(props);
this.state={
searchFilter:""
}
this.searchHandle=this.searchHandle.bind(this);
this.sortHandle=this.sortHandle.bind(this);
}
searchHandle(e){
this.setState({
searchFilter:e.target.value
});
this.props.search(e.target.value);
}
sortHandle(e){
this.props.sortBy(e.target.value);
}
componentDidMount(){
this.props.getCategoryInfo(this.props.page,this.props.pageId);
}
componentWillReceiveProps(nextProps){
if(nextProps.page !== this.props.page || nextProps.pageId !== this.props.pageId){
this.props.getCategoryInfo(nextProps.page,nextProps.pageId);
}
}
changeText(){
if(this.props.categoryTitle != undefined){
let categoryTitle=this.props.categoryTitle.charAt(0).toUpperCase() + this.props.categoryTitle.slice(1);
categoryTitle=categoryTitle.split('_').join(' ');
return categoryTitle;
}
}
render(){
const {error,isLoading}=this.props
if(error) return <ResourceNotFound error={error}/>;
if(isLoading) return <div className="spinner"></div>;
return (
<div className="container-fluid mb-4 categoryWrapper">
<div className="row mx-0 pt-4">
<div className=" col-sm-2 col-md-2 col-lg-2 px-2">
<div className="input-group mb-3">
<div className="input-group-prepend">
<span className="input-group-text" id="basic-addon1"><i className="fa fa-search" aria-hidden="true"></i></span>
</div>
<input type="text"
className="form-control"
placeholder="Search by brand"
onChange={this.searchHandle}
value={this.state.searchFilter}
/>
</div>
</div>
<div className=" col-sm-2 col-md-2 col-lg-2 px-2">
<div className="form-group">
<select className="form-control" id="sel1"
placeholder="-- Sort By -- "
onChange={this.sortHandle}
>
<option disabled>-- Sort By --</option>
<option value="brand" >Brand</option>
<option value="likes">Likes</option>
<option value="views">Views</option>
</select>
</div>
</div>
</div>
<div className="row mx-0 py-3">
{this.props.isLoading ? <div className="spinner"></div> : null}
{this.props.product && this.props.product.map((product,i)=>
<div className="col-sm-3 col-md-3 col-lg-3" key={product.id}>
<Link to={`/SmartView/${this.props.page}/${product.modelname}`} className="routeDecorator">
<div className="border mb-2 p-3 rounded ">
<span className="text-grey">
<span className="mr-2">
<i className="fa fa-thumbs-o-up" aria-hidden="true"> {product.modellikes}</i>
</span>
<span className="float-right">
<i className="fa fa-eye" aria-hidden="true"> {product.modelviews} views</i>
</span>
</span>
</div>
</Link>
</div>
)}
</div>
</div>
);
}
}
function mapStateToProps(state){
const {isLoading,isLoaded,error,categoryTitle,product,searchText,sortValue} = state.products
return {
isLoading,
error,
product:getVisibleCategory(state) || product,
categoryTitle
}
}
export default connect(mapStateToProps,{getCategoryInfo,search,sortBy})(SmartCategory);
推荐答案
MapStateToProps对每次返回的值进行浅表比较.浅表比较将比较对象和数组的引用.排序时，数组将在适当的位置排序，因此引用不会更改.请参见 sort .您可以通过返回对数组的新引用来证明这一点:
MapStateToProps does a shallow compare of the values returned each time. A shallow compare will compare references for objects and arrays. When you sort, the array is sorted in place, so the reference doesn't change. See sort. You could prove it by returning a new reference to the array:
return [...ListOfCategory.sort(a,b) // rest of sort code ]
这篇关于Reactjs Redux:mapStateToProps不会在状态更改时呈现组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
