Reactjs 如何使用UseState对React钩子中的数组进行排序

我正在从服务器获取数据，在数组中有两个对象，分别是“name”和“Money” 现在我需要通过比较money字段对数组进行排序，在尝试使用下面的代码之后，我得到了 类似于“TypeError:无法读取未定义的属性‘money’”的错误，我在某个地方遇到了If条件的问题

const [dataObject, setdataObject] = useState([{}])

  const sortbyRich=()=>{
       
         for(let i=0;i<dataObject.length;i++){
           for(let j=0;j<dataObject.length;j++){
              if(dataObject[j].money < dataObject[j+1].money){
                
                    let temp = dataObject[j];
                    dataObject[j]= dataObject[j+1];
                    dataObject[j+1]= temp;
              }  
           }
         }
       setdataObject(dataObject);
   }

const[dataObject，setdataObject]=useState（[{}]）
常量sortbyRich=（）=>{
对于（设i=0；i问题在于这条线

if(dataObject[j].money < dataObject[j+1].money){


这回答了你的问题吗？首先，你在改变状态。永远不要在React中改变状态。其次，如果你的循环到达数组中的最后一个元素，那么这个代码
dataObject[j+1]。money
将寻找下一个，但既然没有下一个，那么
dataObject[j+1]
将是未定义的，您将得到该错误。在尝试访问下一个元素之前，请检查您是否位于最后一个元素，或者只是
const sortByRich=（）=>setdataObject（prevData=>prevData.slice（）.sort（（a，b）=>b.money-a.money））
你能在Stackbiltz中这样做吗，因为当我们将数据返回到排序时，它只给我原始数组数据，而不是排序后的数组data@Sundeep考虑到您自己没有提供a，这是一个很高的要求。这里有一个小错误，我们需要更改parseInt（b.money）-parseInt（a.money）那么，它的工作为me@Sundeep当然。更新了答案以提供一个运行的codesandbox。我正在控制台中获取已排序的数组数据，但它没有更新浏览器中的状态，我喜欢这个dataObject。sort（（a，b）=>b.money-a.money）console.log（dataObject）；setdataObject（dataObject）；@Sundeep这是因为
sort（）
操作到位。正如Drew正确指出的，您需要在排序之前复制当前数组，以便React能够正确更新状态。是的，非常感谢，您的代码解决了我的问题。您希望记住排序的开始，以避免在每次渲染时重新排序，仅在数组更改时
setdataObject(data => {
  const dataToSort = [...data];
  dataToSort.sort((a, b) => Number(a.money) - Number(b.money)); // or b.money - a.money to invert order
  return dataToSort; // <-- now sorted ascending
})

const data = [
  {
    id: 0,
    money: '13.37'
  },
  {
    id: 1,
    money: '13.36'
  },
  {
    id: 2,
    money: '6.99'
  },
  {
    id: 3,
    money: '14'
  },
  {
    id: 4,
    money: '0.03'
  },
  {
    id: 5,
    money: '6.98'
  }
];

const App = () => {
  const [dataObject, setdataObject] = useState(data);

  const sortByRich = () => {
    setdataObject((data) => {
      const dataToSort = [...data];
      dataToSort.sort((a, b) => Number(a.money) - Number(b.money));
      return dataToSort;
    });
  };

  return (
    ...
  );
}

// let's assume you are getting this array of object

let objArr = [
  {name: "Elon", money: 80},
  {name: "Jeff", money: 100},
  {name: "Bill", money: 10}
];

/*
Now just sort it.
For desc sort: objArr.sort((a,b) => parseInt(b.money) - parseInt(a.money))
For asc sort: objArr.sort((a,b) => parseInt(a.money) - parseInt(b.money))
*/
objArr.sort((a,b) => parseInt(b.money) - parseInt(a.money))

console.log(objArr);

/*
OUTPUT:
[
  { name: 'Jeff', money: 100 },
  { name: 'Elon', money: 80 },
  { name: 'Bill', money: 10 }
]

*/

// now use the hook to save sorted data

setObjectdata(objArr);