在React中只有在第二次事件调用之后才会更新这两个状态

Question

我有两个函数。一个是当我输入搜索时被调用。第二个是在我选择类别时被调用。搜索的默认值为"，而选择的类别为空。然而，当我第一次输入或第一次点击类别。第一次调用函数时使用两种状态的默认值。我好像总是比正确的人早一步。

const onTextChanged = (e: ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setIsComponentVisible(true);
setSearch(value);
};

const selectCategory = async (category) => {
const { id } = category;
if (!selectedCategories || !selectedCategories[id]) {
setCategories((prevState: any) => ({
...prevState,
[id]: category
}));
} else {
setSelectedCategories((prevState: any) => {
const { [id]: undefined, ...rest } = prevState;

return rest;
});
}
};

什么是错误的，它可以如何修复?

Answer 1

如果你试图console.log()你的状态，就在你的状态设置器被调用之后，你的状态可能不会被更新，因为React异步设置状态。useEffect可以帮你解决这个问题，你可以在每次变化时用console.log()来表示状态。像这样:

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