响应setState()不触发重呈现

Question

我有一个组件，它从其他文件接收数据并设置为状态：

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中看到它。为什么当I console.log(newArr)的结果被正确排序，但是这种状态的设置不会触发重呈现？下面是沙箱：

https://codesandbox.io/s/charming-shape-r9ps3p?file=/src/App.js

Answer 1

给你：码箱演示。

您应该首先对要修改的数组做一个浅拷贝。然后将该数组设置为新状态。然后，它重新呈现组件，您可以按照您的需要进行筛选。

  const sort = (event) => {
    console.log(event);
    //shallow copying the state. 
    const newArr = [...sortedPlans];

    //modifying the copy
    newArr.sort((a, b) => {
      return b[event] - a[event];
    });
    console.log(newArr); //results here are correctly sorted as per event
    
    //setting the state to the copy triggers the re-render.
    return setSortedPlans(newArr);
  };