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 结果 here

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

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