React Hooks - 对象排序时组件未更新

Question

所以，我正在尝试按位置将data按字母顺序排序。 我在下面拥有的内容似乎有效，并且我的控制台日志输出正确的顺序 - 但是，我的组件似乎没有重新渲染。 我不确定它是否只是没有重新渲染，或者useEffect是否正在启动并再次默认排序？ 对此很陌生，所以我不完全确定！

我已经尝试了以下内容，进行了一些简单的文本更改，并且应用程序按预期更新。

不确定我哪里出错了？

任何帮助都会很棒。 谢谢！

import React, { useState, useEffect } from 'react';
import axios from 'axios';
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
const fetchData = async () => {
const result = await axios('/api/somestuff');
setData(result.data.default.sort((a,b) => a.brand.localeCompare(b.brand)));
};
fetchData();
}, []);
const sortLocation = () => {
setData(data.sort((a,b) => a.location.localeCompare(b.location)));
console.log(data)
}
return (
<>
<button onClick={() => sortLocation()}>Sort by location</button>
{data && data.map((item, index) => (
<span key={index}>
<p>{item.brand}</p>
<p>{item.location}</p>
</span>
))}
</>
);
}
export default App;

Answer 1

好的，你在这里做的排序是就地排序，所以基本上它和以前一样的数组，因为数组是引用类型是Javascript 您需要创建一个新数组来更新状态，您可以这样做

const sortLocation = () => {
const dataArray = [ ...data]
setData(dataArray.sort((a,b) => a.location.localeCompare(b.location)));
console.log(data)
}

希望对你有帮助