我有一个组件,它从其他文件接收数据并将其设置到状态中:
const [sortedPlans, setSortedPlans] = useState(
data.Plans.sort((a, b) => b.IndustryGrade - a.IndustryGrade)
);//data is from external file
在设置状态、排序数据并呈现初始屏幕后,我有一个函数,每次调用时都会对sortedPlans进行排序:
const sort = (event) => {
console.log(event);
const newArr = sortedPlans.sort((a, b) => {
return b[event] - a[event];
});
console.log(newArr);
return setSortedPlans(newArr);
};
问题在于这样永远不会触发组件的重新渲染。我希望当我设置新状态时,能够在jsx中看到它。为什么当我console.log(newArr)时,结果被正确排序,但是这个状态设置没有触发重新渲染?下面是sandbox链接:https://codesandbox.io/s/charming-shape-r9ps3p?file=/src/App.js
sortedPlans.sort
会原地对数组进行排序并返回相同的数组。 - Felix Klingvar arr = [3,2,1]; console.log(arr === arr.sort());
。React 只会在必要时重新渲染,即如果值发生变化。React 不知道您是否改变了此数组。这就是为什么在 React 中,通常在修改可变值之前创建其副本的原因。 - Felix Kling