如何將 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 (
);