javascript - 对数组进行排序并传递它后，React 钩子(Hook) useState/setState 不起作用

Question

我有 React 应用程序，我正在使用 React 钩子(Hook):

  const [companies, setCompanies] = useState([]);

我正在获取数据，而“公司”正在填满数据。我还有另一个按 NetIncome 对数据进行排序的按钮:

 const sortByIncome = e => {
    const el = document.getElementById("sort-selectbox");
    const arr = companies.sort((a, b) => (a.NetIncome > b.NetIncome ? -1 : 1));
    console.log(arr);
    setCompanies(arr);
  };

问题是 setCompanies 不会重新渲染。在 console.log 我可以看到该数组已正确排序，即使我 console.log(companies) 我也可以看到它也已排序。但注意发生在界面中。另外，如果我输入相同的代码:

const sortByIncome = e => {
    const el = document.getElementById("sort-selectbox");
    const arr = companies.sort((a, b) => (a.NetIncome > b.NetIncome ? -1 : 1));
    console.log(arr);
    setCompanies([]);
  };

但传递给 setCompanies 空数组它立即工作并且什么都不显示(我有渲染函数，将公司作为参数)。
那么为什么它不适用于传递 arr 呢？是因为我传递了相同的数组但只是排序了吗？

Answer 1

这里:

    const arr = companies.sort((a, b) => //...

Array.prototype.sort就地排序数组，即改变原始对象。引用没有改变，突变也没有被注意到。改为

    const arr = [...companies].sort((a, b) => //...