如何将 useEffect 用于没有依赖性的 useState 变量？

Question

我正在创建一个 React 表单，该表单在本地 state 中存储了新产品列表，即

const [listItem, setListItem] = useState([]);

我已经提交处理程序，其中我 append 新值喜欢 -

const handleAddProduct = (data) => {
  setListItem ([...listItem], data)
  console.log('ListItems-', listItem); // my console log doesn't update state but in react debugger tool I do see it's updated.
}

如何使用 useEffect 使其始终更新 state？ PS - 数据不是本地 state，它被限制在某个块中。

Answer 1

State 更新是异步的，不会立即反映。 只有在下一个周期。 这就是为什么您可以签入 useEffect 的原因：

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

State 正在正确更新。

与问题无关，但是，如果您要添加到数组中，您可能需要这样做：

const handleAddProduct = (data) => {
setListItem ([...listItem, data]);
}

Answer 2

由于 Reactjs 的更新批处理，您无法在更新后立即在事件处理程序中看到更新的 state

如果你想看到你的价值变化，把它放在你的组件的 return function 之前：

是这样的：

const handleAddProduct = (data) => {
    setListItem ([...listItem], data)
}

console.log('ListItems-', listItem);

return (
);