javascript - Reactjs使用状态: select onChange triggers setState but component doesn't re-render

Question

我正在尝试使用 React 中的选择下拉列表按属性对对象数组进行排序。

数据是使用 useState() Hook 在父容器中定义的，并且我将 onSortChange 函数向下传递给子选择组件 DataSelector。数据由另一个组件 DataList 显示为列表。下面的最小示例用于演示(为简洁起见，减去导入):

1. 父容器:

const ParentContainer = () => {

    const [data, setData] = useState([]);

    useEffect( () => {
        populateData();
    }, []);

    function populateData() {
        const dave = {first_name: 'David', last_name: 'Taylor',
                    age: 25, salary: 25000};
        
        const bob = {first_name: 'Robert', last_name: 'Bush',
                    age: 31, salary: 30000};

        const sue = {first_name: 'Susan', last_name: 'Harman',
                    age: 22, salary: 28000};

        setData([dave, bob, sue]) 
    };

    const onSortChange = function(property) {
        setData(data.sort(propertySort(property)));
    };

    // sort by object property value (works for strings or )
    const propertySort = (prop) => {
        return function(a, b) {
            return (a[prop] < b[prop]) ? -1 : (a[prop] > b[prop]) ? 1 : 0;
        };
    };

    return (
        <>
            <DataSelector onSortChange={onSortChange} />
            <DataList data={data}/>
        </> 
    );
};

2:DataSelector组件

const DataSelector = ({onSortChange}) => {

    const handleChange = function(event) {
        onSortChange(event.target.value);
    }

    return (
        <select onChange={handleChange}>
            <option value="first_name">Name</option>
            <option value="age">Age</option>
            <option value="salary">Salary</option>
        </select>
    );
};

export default DataSelector;

当我更改选择选项时，handleChange 会正确触发，并且如果我在父容器中console.log“data”，它会正确返回按从handleChange 传递的值排序的数组。但是，DataList 组件不会重新呈现列表项。

在调用数据的 setState 函数后，我还需要采取另一个步骤来重新渲染 DataList 吗？

Answer 1

sort() 方法对数组的项目进行就地排序。除了返回排序后的数组之外，它还更改了原始数组中元素的位置。

因此 setData 不会更改该值。使用以下任一方法来解决您的问题。

setData(data.slice().sort(propertySort(property)));

或

setData([...data.sort(propertySort(property))]);

或者

setData([...data].sort(propertySort(property)));