React状态变更时数组未渲染，请求问题排查与解决

核心问题 #

你的排序函数里用了Array.sort()，这个方法是原地修改原数组的——也就是newArray和原products数组指向的是同一个内存地址。React的useState判断状态是否变化时，会对比前后状态的引用，引用相同就会认为状态没更新，自然不会触发组件重新渲染。

修复代码 #

先创建原数组的副本，再对副本排序，让新数组的引用和原数组不同，就能触发更新了：

const sortByLow = () => {
  // 用扩展运算符创建原数组副本
  const newArray = [...products].sort((a,b) => b.price - a.price);
  setProducts(newArray);
};

const sortByHigh = () => {
  // 也可以用Array.from创建副本
  const newArray = Array.from(products).sort((a,b) => a.price - b.price);
  setProducts(newArray);
};

补充说明 #

• 除了扩展运算符和Array.from，用products.slice()也能创建数组副本，效果一致。
• 你在useEffect里获取数据时能正常更新，是因为服务器返回的allProducts是全新的数组，引用和初始空数组不同，所以setProducts能触发渲染。

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