反應 setState() 不觸發重新渲染

Question

我有一個從其他文件接收數據並設置為 state 的組件：

const [sortedPlans, setSortedPlans] = useState(
    data.Plans.sort((a, b) => b.IndustryGrade - a.IndustryGrade)
  );//data is from external file

設置 state、排序數據並呈現初始屏幕后，我有 function 每當調用 sortedPlans 時對其進行排序：

const sort = (event) => {
    console.log(event);
    const newArr = sortedPlans.sort((a, b) => {
      return b[event] - a[event];
    });
    console.log(newArr);
    return setSortedPlans(newArr);
  };

問題是這永遠不會觸發組件的重新渲染。 我希望當我設置新的 state 時能夠在 jsx 中看到它。 為什么當我使用 console.log(newArr) 結果排序正確，但 state 的設置沒有觸發重新渲染？ 這是沙箱：

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

Answer 1

給你 go： Codesandbox 演示。

您應該首先對要修改的數組進行淺表復制。 然后將該數組設置為新的 state。然后它會重新呈現組件，您就可以按照自己的意願進行過濾。

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