如何将 useEffect 用于没有依赖关系的 useState 变量？答案

【问题标题】：How to use useEffect for a useState variable that has no dependency?如何将 useEffect 用于没有依赖关系的 useState 变量？
【发布时间】：2021-08-25 08:33:40
【问题描述】：

我正在创建一个 React 表单，该表单将新产品列表存储在本地状态，即

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

我有提交处理程序，我在其中添加新值，例如-

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 使其始终更新状态？附： - 数据不是本地状态，它被限制在某个块中。

【问题讨论】：

这能回答你的问题吗？ useState set method not reflecting change immediately

标签： reactjs use-effect use-state

【解决方案1】：

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

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

状态正在正确更新。

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

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

【讨论】：

感谢您的回答，但它向我显示了以下错误-React hook useEffect 传递了一个不是数组文字的依赖项列表。
修复了这个问题。第二个参数应该是一个数组

【解决方案2】：

由于 Reactjs 的 update batching，您无法在更新后立即在事件处理程序中看到更新后的状态

如果你想看到你的值变化，把它放在你组件的返回函数之前：

类似这样的：

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

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

return (
);

【讨论】：