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

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

2 个答案: