React Redux：排序后mapStateToProps未触发组件重渲染问题

我一眼就发现问题所在了——你在selector里使用的Array.sort()是原地修改数组的方法，这直接导致Reselect无法检测到数据变化，进而组件不会更新。

核心原因 #

Reselect的createSelector依赖引用相等性来判断是否需要更新缓存和返回新结果。当你调用ListOfCategory.sort(...)时，这个方法会直接修改原数组的内容，但数组本身的引用并没有改变。Reselect对比前后两次的输出结果，发现引用相同，就会认为结果没有变化，不会触发组件的重新渲染。

修复步骤 #

解决方法很简单：在排序前先创建原数组的副本，这样排序后的数组是一个全新的引用，Reselect就能正确识别到数据变化了。你可以通过展开运算符[...arr]或者arr.slice()来创建数组副本。

修改你的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?.trim()){
 // 创建数组副本后再筛选+排序
 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.localeCompare(b.modelname); // 用localeCompare更简洁可靠
     }
     return 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.localeCompare(b.modelname);
   }
   return 0;
 });
 }
 // 没有筛选和排序时，返回原数组即可（原数组变化时Reselect会检测到输入变化）
 return ListOfCategory;
 }
)

额外优化建议 #

1. 用searchText?.trim()替代原来的多重空值判断，代码更简洁易读。
2. 字符串比较使用localeCompare方法，比手动编写三目运算符更可靠，还能支持多语言排序场景。
3. 给sort回调函数添加默认返回值0，避免出现未覆盖到的排序分支导致的异常。

这样修改后，每次排序操作都会返回新的数组引用，Reselect就能正确触发更新逻辑，组件也会在排序操作后重新渲染展示排序后的结果了。

内容的提问来源于stack exchange，提问作者CodeZombie