反应 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 中看到它。为什么当我 console.log(newArr) 结果被正确排序但是这个状态设置没有触发重新渲染？这是沙盒：

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

Answer 1

给你：Codesandbox demo.

您应该首先对要修改的数组进行浅表复制。然后将该数组设置为新状态。然后它 re-renders 组件，你就可以像你想要的那样过滤。

  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);
  };

反应 setState() 不触发重新渲染

react setState() not triggering re-render

javascript

reactjs

react-hooks