在对数组进行排序并传递它后，React 挂钩 useState/setState 不起作用

Question

我有 React 应用程序，我正在使用 React 钩子：

  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(companys) 中也可以看到它也已排序。但是注意发生在界面中。另外，如果我输入相同的代码：

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) => //...