Question

如何使用 UseState 对 React Hooks 中的数组进行排序

2020-10-13

4577

reactjs react-hooks

我正在从服务器获取数据，数组中有两个对象，分别为“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);
   }

Answer 1

问题是这一行

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

您的初始状态是一个只有 1 个元素的数组，因此不仅根据定义它已经排序，而且访问最后一个索引 j + 1 之后的对象属性将产生未定义的访问错误。

使用常规 array::sort 并传递您自己的比较器。使用功能状态更新，复制当前数组，就地排序并返回新的排序数组。

由于比较数字：

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

Answer 2

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