Redux排序后组件未接收更新Props问题求助

嘿，我一眼就看出问题出在哪了——你在选择器里用了数组的sort()方法，这个方法是原地修改原数组的！Redux判断状态变化是基于引用的，原数组的引用没改变，所以React组件就不会触发重新渲染，哪怕数组内容已经变了。

给你改一下选择器函数，解决这个问题：

const getFilteredVenues = (venues, { sortBy }) => {
  // 先拷贝原数组，避免直接修改Redux Store里的原数据
  const sortedVenues = [...venues];
  
  if (sortBy === "alfabetical") {
    sortedVenues.sort((a, b) => {
      const nameA = a.venue_name.toLowerCase();
      const nameB = b.venue_name.toLowerCase();
      
      // 这里要返回-1、0、1，而不是布尔值，符合sort的规范
      if (nameA < nameB) return -1;
      if (nameA > nameB) return 1;
      return 0;
    });
  }
  
  return sortedVenues;
};

为什么这样改就行？有两个关键点：

• 创建数组副本：用扩展运算符[...venues]把原数组复制一份，这样我们排序的是新数组，不会改动Redux Store里的原数组引用。Redux能检测到返回的数组是新引用，就会通知组件更新。
• 修正排序比较逻辑：你原来的比较函数返回的是布尔值，这其实不符合Array.sort()的要求——它需要返回负数、零或正数来确定元素顺序。布尔值会被转成0或1，可能导致排序结果不稳定，改成返回-1、0、1的形式更准确。

另外提一句，如果你的venues数组里的对象是复杂嵌套结构，浅拷贝不够的话可以用JSON.parse(JSON.stringify(venues))做深拷贝，但在这个排序场景下，浅拷贝完全够用了，因为我们只是调整元素顺序，没修改对象内部的属性。

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