javascript - localeCompare 对象数组排序不起作用

Question

这个问题已经有答案了:

Why doesn't my arrow function return a value? (1 个回答)

已关闭 3 年前。

我的问题类似于 this ，但不一样。

我正在尝试使用 localeCompare 对对象数组进行排序。它没有理由不工作，但它不工作。不知怎的，我正在做正确的事情。/叹气/

这就是我获取数据的方式

  const [data, setData] = useState([]);
  const [isBusy, setBusy] = useState(true)

  useEffect(() => {
    console.log('I was run once');
    async function fetchData() {
      const url = `${
        process.env.REACT_APP_API_BASE
        }/api/v1/endpoint/`;

      axios.get(url).then((response: any) => {
        setBusy(false);
        setData(response.data.results)
        console.log(response.data.results);
      });
    }

    fetchData();
  }, [])

这是排序函数

  function onSort(event: any, sortKey: string) {
    const newData = data;
    newData.sort((a: any, b: any): any => {
      a[sortKey].toString().localeCompare(b[sortKey]);
    })
    setData(newData);
  }

典型的对象数组是这样的

[
  {
    "avatar": "big",
    "name": "Username",
  },
  {
    "avatar": "small",
    "name": "Rex",
  },
  {
    "avatar": "medium",
    "name": "Duh",
  }
]

然后表头有这个

<th scope="col" className="text-center" onClick={e => onSort(e, 'name')}>Name</th>

虽然onSort()函数运行时没有任何错误，对象不会按照 sortKey 进行排序

我使用localeCompare吗？错？我该怎么做才能使上述正确？

此外，setData ，我相信应该更新data从而触发表的重建，这似乎正在发生，因为如果我将空数组传递给 setData ，表格留空。

编辑:

HTML部分

              ...
              return (
                <div>
                  <table className="table table-hover">
                    <thead>
                      <tr>
                        <th onClick={e => onSort(e, 'avatar')}>Avatar</th>
                        <th onClick={e => onSort(e, 'name')}>Name</th>
                    </thead>
                    <tbody>
                      {data && data.map((item: any, index: any) => {
                        return (
                          <tr key={index}>
                            <th>{{ item.avatar}}</th>
                            <td>{item.name}</td>
                            <td className="text-center" style={{ 'fontSize': '32px', 'color': '#981c1e' }}>0</td>
                          </tr>
                        )
                      })}

                    </tbody>
                  </table>
                 </div>
              ...

如果我理解的话，如果 setData触发数据更改，render重新渲染？

Answer 1

您需要一个 return statement通过在 arrow function 中使用大括号

newData.sort((a: any, b: any): any => {
    return a[sortKey].toString().localeCompare(b[sortKey]);
});