javascript - 为什么在 React Hooks 中排序后数据没有更新？

Question

我是 React Hooks 新手。我正在尝试对 React Hook 内的表格进行排序，但单击后我的内容没有更新。这是为什么？

这是我的钩子(Hook):

const Main = ({ dataProps }) => {
const [data, setData] = useState(dataProps);
const sortById = (field) => {
        let sortedData = data.sort((a, b) => {
            if(a[field] < b[field]) { return -1; }
            if(a[field] > b[field]) { return 1; }
            return 0;
        });
        setData(sortedData);
};
return (
        <table>
            <thead>    
                <tr>
                    <th>iD <div className="arrows"><div onClick={() => sortById("id")} className="arrow-up"/></th>
                    <th>First name <div className="arrows"><div onClick={() => sortById("firstName")} className="arrow-up"/></div></th>
                </tr>
            </thead>
            <tbody>
            {data.map((user) => {
                return <tr key={user.id}>
                    <td className="number">{user.id}</td>
                    <td className="firstname">{user.firstName}</td>
                </tr>
            })}
            </tbody>
        </table>
);
};

Answer 1

问题是排序返回相同的数组，这不会导致重新渲染。如果您在排序之前进行切片，则会解决问题。

const sortById = (field) => {
        let sortedData = data.slice().sort((a, b) => {
            if(a[field] < b[field]) { return -1; }
            if(a[field] > b[field]) { return 1; }
            return 0;
        });
        setData(sortedData);
};

顺便说一句，@jonas-wilms 提到了更有效的方法