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

Question

我正在创建一个 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 使其始终更新状态？ P.S。 - 数据不是本地状态，它被限制在某个块中。

Answer 1

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

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

状态正在正确更新。

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

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

Answer 2

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

如果您想查看值的变化，请将其放在组件的 return 函数之前：

像这样：

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

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

return (
);

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

How to use useEffect for a useState variable that has no dependency?

reactjs

use-effect

use-state