localeCompare 对象数组排序不起作用

Question

我的问题与此类似，但不一样。

我正在尝试使用对对象数组进行排序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声明

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