Javascript 对数组排序并传递后，useState/setState不工作

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

问题是，setcompanys不会重新渲染。在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空数组时，它立即工作，并且不显示任何内容（我有一个render函数，该函数将公司作为param）。 那么，为什么它不适用于通过arr？是因为我正在传递相同的数组，但刚刚排序吗？

此处：

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

Array.prototype.sort

对数组进行适当排序，即对原始对象进行变异。参照物没有改变，突变也没有被注意到。取而代之

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

在这里：

Array.prototype.sort

对数组进行适当排序，即对原始对象进行变异。参照物没有改变，突变也没有被注意到。取而代之

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

---

函数

sortByIncome

中的钩子变量

companys

的值将始终是钩子的初始值（

[]

），并且永远不会收到使用

setcompanys

设置的新值

const sortByIncome = React.useCallback(e => {

   // Using `companies` will always result in the current value

}, [companies]);

问题的解决方案是将函数

sortByIncome

包装在

useCallback

hook中，并将hook变量

companys

作为依赖项。这将确保函数始终使用

公司的当前值

const sortByIncome = React.useCallback(e => {

   // Using `companies` will always result in the current value

}, [companies]);


函数
sortByIncome
中的钩子变量
companys
的值将始终是钩子的初始值（
[]
），并且永远不会收到通过使用
设置companys
设置的新值

const sortByIncome = React.useCallback(e => {

   // Using `companies` will always result in the current value

}, [companies]);

问题的解决方案是将函数
sortByIncome
包装在
useCallback
hook中，并将hook变量
companys
作为依赖项。这将确保函数始终使用
公司的当前值

const sortByIncome = React.useCallback(e => {

   // Using `companies` will always result in the current value

}, [companies]);


您如何呈现您的列表？如果要将其映射到JSX元素列表，那么这些元素是否有键？此外，这种排序可能会导致不一致的结果，因为当两个值相同时，您没有返回0。您可以将其更改为：
companys.sort（（a，b）=>a.NetIncome-b.NetIncome）
@IsmaelPadilla我是这样做的：const companyesresult=array=>{if（array！==未定义）{return array.map（（项，索引）=>{return return；}；}；您不应该使用索引作为键！特别是当您的物品可以重新排序时。阅读：@IsmaelPadilla在我的情况下，钥匙的最佳做法是什么？您如何呈现您的列表？如果要将其映射到JSX元素列表，那么这些元素是否有键？此外，这种排序可能会导致不一致的结果，因为当两个值相同时，您没有返回0。您可以将其更改为：
companys.sort（（a，b）=>a.NetIncome-b.NetIncome）
@IsmaelPadilla我是这样做的：const companyesresult=array=>{if（array！==未定义）{return array.map（（项，索引）=>{return return；}；}；您不应该使用索引作为键！特别是当您的物品可以重新排序时。阅读：@IsmaelPadilla在我的情况下，钥匙的最佳做法是什么？谢谢你帮我解决这个棘手的问题。您的解决方案非常有效。感谢您帮助解决这一棘手问题。你的解决方案非常有效。