React中点击排序按钮无法更新responses状态问题求助

问题原因 #

你遇到的问题核心在于：Array.sort()是原地修改数组的方法——它会直接改变原数组的顺序，而非返回新数组。React的状态更新依赖于引用变化，当你在setResponse中返回修改后的原数组时，数组引用未发生改变，React会判定状态无更新，因此不触发组件重渲染。

解决方案 #

排序前先创建原数组的副本，对副本排序后再更新状态，确保返回新数组（引用不同），让React识别到状态变化：

修改你的sort函数：

const sort = () => {
  setResponse(previousList => [...previousList].sort(compare));
};

这里用扩展运算符[...previousList]快速生成原数组的浅拷贝，对拷贝执行排序后传递给setResponse，保证状态更新的是新引用的数组。

额外优化建议 #

• 不要用Math.random()作为列表元素的key：每次渲染时key都会变化，React无法正确复用组件，引发不必要重渲染甚至bug，建议使用食材对象的唯一标识（比如ingr.id，若API返回）作为key。
• 样式对象ste中的flexDirection:"Column"首字母需改为小写"column"，否则样式规则不生效。

优化后的相关代码片段：

const sort = () => {
  setResponse(previousList => [...previousList].sort(compare));
};

// 食材渲染部分
each.ingredients.map(ingr => (
  <ul key={ingr.id}> {/* 替换Math.random()为食材唯一标识 */}
    <li>{ingr.name}</li>
    <li>{ingr.quantity}</li>
    <li>{ingr.quantity_type}</li>
  </ul>
))

内容的提问来源于stack exchange，提问作者Abdul Haseeb Ahmad Bashir