Question

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

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

父容器：

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)));

Answer 2

我相信您需要将数据设置为新的东西，而 data.sort() 是同一个数组。如果您克隆数据，然后将排序的克隆传递给 setData，我认为它应该可以工作。

Answer 3

我认为您需要使用扩展运算符才能正确更新状态

尝试如下：-

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

reactjs useState：选择 onChange 触发 setState 但组件不会重新渲染

3 个答案: