Javascript Reactjs Redux:MapStateTrops在状态更改时不呈现组件

我在同一个组件上有搜索过滤器和排序输入。我使用的是数据数组被过滤和排序的位置。mapStateToProps正在更新每个搜索筛选器结果上的组件。但mapStateToProps在对数组排序后不会更新组件

选择器/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;
    }
  });

  }
}
)

从“重新选择”导入{createSelector}
const getListOfCategory=（state）=>state.products.product
const getSearchText=（state）=>state.products.searchText
const getSortValue=（state）=>state.products.sortValue
export const getVisibleCegory=createSelector(
[getListOfCategory、getSearchText、getSortValue]，
（类别列表、搜索文本、排序值）=>{
如果（（searchText！==未定义）&&&（searchText！==null）&&（searchText！==“”）{
返回ListOfCategory.filter（（val）=>val.modelname.toLowerCase（）.includes（searchText.toLowerCase（））.sort（（a，b）=>{
if（sortValue==='likes'）{
返回b.modellikes-a.modellikes；
}
if（sortValue==='views'）{
返回b.modelviews-a.modelviews；
}
如果（sortValue==‘品牌’）{
返回a.modelname>b.modelname？1:a.modelname{
if（sortValue==='likes'）{
返回b.modellikes-a.modellikes；
}
if（sortValue==='views'）{
返回b.modelviews-a.modelviews；
}
如果（sortValue==‘品牌’）{
返回a.modelname>b.modelname？1:a.modelname

这是我的反应组件

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);

从“React”导入React；
从'react redux'导入{connect}；
从“../actions/productActions”导入{getCategoryInfo，search，sortBy}；
从“../selectors”导入{GetVisibleCegory}；
从'react router dom'导入{Link}；
类SmartCategory扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
搜索过滤器：“
}
this.searchHandle=this.searchHandle.bind（this）；
this.sortHandle=this.sortHandle.bind（this）；
}
搜索手柄（e）{
这是我的国家({
搜索过滤器：e.target.value
});
this.props.search（如target.value）；
}
索坦德尔（e）{
这个.props.sortBy（如target.value）；
}
componentDidMount（）{
this.props.getCategoryInfo（this.props.page，this.props.pageId）；
}
组件将接收道具（下一步）{
if（nextrops.page！==this.props.page | | nextrops.pageId！==this.props.pageId）{
this.props.getCategoryInfo（nextrops.page，nextrops.pageId）；
}
}
changeText（）{
if（this.props.categoryTitle！=未定义）{
让categoryTitle=this.props.categoryTitle.charAt（0.toUpperCase（）+this.props.categoryTitle.slice（1）；
categoryTitle=categoryTitle.split（“”“）.join（“”）；
返回类别；
}
}
render（）{
const{error，isLoading}=this.props
如果（错误）返回；
如果（卸载）返回；
返回(
--排序--
烙印
喜欢
意见
{this.props.isLoading？：null}
{this.props.product&&this.props.product.map（（产品，i）=>
{product.modellikes}
{product.modelviews}视图
)}
);
}
}
函数MapStateTops（状态）{
const{isLoading，isLoaded，error，categoryTitle，product，searchText，sortValue}=state.products
返回{
孤岛，
错误，
产品：GetVisibleCography（state）| |产品，
分类
}
}
导出默认连接（mapStateToProps，{getCategoryInfo，search，sortBy}）（SmartCategory）；

MapStateToProps

对每次返回的值进行粗略比较。浅层比较将比较对象和数组的引用。排序时，数组会就地排序，因此引用不会更改。看见您可以通过返回对数组的新引用来证明这一点：

 return [...ListOfCategory.sort(a,b) // rest of sort code ]

---

哦，是的！！非常感谢@daston。如果我的代码可以改进，请告诉我。