Question

我是React Hooks的新手。我正在尝试对React 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

<template> <div> <GmapMap :center="center" :zoom="zoom" :mapTypeId="'satellite'" :tilt="titl" :heading="heading" ref="map"> </GmapMap> </div> </template> <script> export default { data() { return { zoom: 18, center: { lat: 45.518, lng: -122.672 }, titl: 45, heading: 90 }; }, methods: {} }; </script>对sortById数组进行排序。但是它不会触发组件重新渲染。 data显然是一种状态：

field

Answer 2

问题是排序返回相同的数组，不会导致重新渲染。如果在排序之前先切片，它将解决问题。

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提到BTW更有效的做事方式

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

2 个答案: