如何使用useEffect处理无额外依赖的useState变量更新问题

问题原因 #

1. setListItem调用语法错误：状态更新函数仅接受一个参数（新状态值/返回新状态的函数），你当前将data作为第二个参数传入，不会生效，追加元素需要把data放入展开后的数组内部。
2. React状态更新是异步批量执行的：调用setListItem后当前作用域内的listItem还是本次渲染闭包绑定的旧值，所以直接打印不会拿到更新后的值，下一次组件重渲染时才会生成新的闭包，包含最新的状态值。

修复方案 #

首先修正状态更新的写法，若需要在状态更新后执行后续逻辑，再通过useEffect监听listItem变化即可：

import { useState, useEffect } from 'react';

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

const handleAddProduct = (data) => {
  // 推荐使用函数式更新，避免闭包导致的状态更新丢失问题，连续多次调用也能正确追加
  setListItem(prevListItem => [...prevListItem, data]);
}

// 监听listItem变化，状态更新后自动触发，此处拿到的永远是最新值
useEffect(() => {
  console.log('最新的产品列表：', listItem);
  // 此处编写状态更新后需要执行的逻辑，例如提交接口、重置表单等
}, [listItem]);

如果仅需要保证状态存储正确、视图正常渲染，不需要在状态更新后执行额外逻辑，只需要修正setListItem的写法即可，无需额外引入useEffect。

内容的提问来源于stack exchange，提问作者Min Yoongi