数据已更改，但前端未更新

Question

我设计了一个表格，它将读取一个对象数组和一个用于排序控制的下拉列表。

但是，当我在下拉列表中选择其他排序值时。前端表没有同时更新。会有延迟，请看下面的例子。

T0：默认按“名称”选择顺序 -> 前端正确（按“名称”排序）

T1: select order by "age" -> 前端不更新（还是按"name"排序）

T2: select order by "name" -> 前端更新（order by "age"）

T3: select order by "age" -> 前端更新（order by "name"）

我的对象数组

var data = [
    {
        key: 1,
        name: 'AAA',
        age: '10',
    },
    {
        key: 2,
        name: 'BBB',
        age: '8',
    },
    {
        key: 3,
        name: 'name',
        age: '12',
    },
]
const [listData, setListData] = useState(data);

下拉控件

const handleOrderChange = (value) => {
    setOrderValue(value);
};

useEffect(() => {
    console.log(orderValue.value); //match what I click
    switch (orderValue.value) {
        case 'name':
            listData.sort((a, b) => (a.name > b.name ? 1 : -1));
            break;
        case 'age':
            listData.sort((a, b) => (a.age> b.age? 1 : -1));
            break;
        default:
            console.log('Default');
    }
    console.log(listData); //match what I expected
}, [orderValue]);

前端

{/* Data */}
        {listData.map((item) => (
            <DataDetail
                key={item.key}
                name={item.name}
                age={item.age}
            ></DataDetail>
        ))}

Answer 1

你不应该像这样改变状态变量：

    switch (orderValue.value) {
            case 'name':
                listData.sort((a, b) => (a.name > b.name ? 1 : -1));
                break;
            case 'age':
                listData.sort((a, b) => (a.age> b.age? 1 : -1));
                break;
            default:
                console.log('Default');
        }

你应该使用：

useEffect(() => {
    switch (orderValue.value) {
            case 'name':
                const listDataCopy = [...listData]
                listDataCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
                setListData(listDataCopy)
                break;
            case 'age':
                const listDataCopy = [...listData]
                listDataCopy.sort((a, b) => (a.age> b.age? 1 : -1));
                setListData(listDataCopy)
                break;
            default:
                console.log('Default');
        }
}, [orderValue, listData, setListData]);