reactjs - ReactJs UseState：将元素插入数组不更新

Question

我正在尝试使用 React Hooks，但不知何故我的状态没有更新。当我单击复选框时（参见示例），我希望将后者的索引添加到数组selectedItems中，反之亦然

我的功能如下所示：

const [selectedItems, setSelectedItems] = useState([]);

const handleSelectMultiple = index => {
    if (selectedItems.includes(index)) {
        setSelectedItems(selectedItems.filter(id => id !== index));
    } else {
        setSelectedItems(selectedItems => [...selectedItems, index]);
    }
    console.log("selectedItems", selectedItems, "index", index);
};

你可以在这里console.log找到结果

结果中的一个空数组，有人可以向我解释我错过了什么吗？

Answer 1

因为useState是异步的——调用它后你不会看到立即更新。

尝试添加一个useEffect使用依赖数组来检查值何时更新的。

useEffect(() => {
    console.log(selectedItems);
}, [selectedItems])

Answer 2

实际上，您的代码没有问题。只是当您登录时selectedItems，状态尚未更新。

如果您需要selectedItems在更新函数中的状态后恰好需要，您可以执行以下操作：

const handleSelectMultiple = index => {
    let newSelectedItems;
    if (selectedItems.includes(index)) {
        newSelectedItems = selectedItems.filter(id => id !== index);
    } else {
        newSelectedItems = [...selectedItems, index];
    }
    setSelectedItems(newSelectedItems);
    console.log("selectedItems", newSelectedItems, "index", index);
};