React使用useState更新数组后控制台打印值未变化问题咨询

问题成因 #

• React 中 useState 的状态更新是异步且绑定当前渲染闭包的：你在 deleteItem 函数作用域内拿到的 items 是函数触发时的状态快照，调用 setItems 只会触发组件重渲染，并不会修改当前作用域内已经存在的 items 变量，因此同一个函数内 setItems 之后打印的 items 仍然是旧值，更新后的状态要等到下一次组件渲染时才能在新的闭包中拿到。
• 你的代码本身存在两处可直接导致逻辑异常的错误：
  1. 函数命名冲突：你自定义的删除函数叫 deleteItem，内部调用接口时又用了 await deleteItem({ id })，会触发递归调用导致栈溢出。
  2. 过滤逻辑变量错误：filter 逻辑中写的是 id !== commentId，但你函数接收的入参是 id，如果 commentId 未定义或者不是你要删除的目标id，会导致过滤结果不符合预期，加上你的测试数据id重复，很容易出现多删、索引错位的问题。

解决方案 #

不需要强行将逻辑放到 useEffect 中，按以下步骤修改即可：

1. 先修复基础错误：修改接口请求函数的名称避免命名冲突，修正过滤逻辑的变量名，同时建议保证每条数据的id唯一，避免同id数据被批量删除。
2. 如果你需要在删除逻辑中直接拿到更新后的列表做后续操作，直接提前计算过滤后的新数组使用即可，不需要依赖当前作用域的旧items：

// 入参改名避免和item的id属性重名，减少歧义
const deleteItem = async (targetId) => {
  console.log('BEFORE- - - ->', items);
  // 替换为你的实际接口函数名，避免和当前函数重名
  await deleteItemApi({ id: targetId });
  // 提前计算更新后的数组
  const newItems = items.filter(({ id }) => id !== targetId);
  setItems(newItems);
  // 需要用新值直接调用newItems即可
  console.log('AFTER- - - ->', newItems);
};

3. 如果你确实需要监听items的变化执行额外逻辑，再把对应逻辑放到useEffect中，声明items为依赖项即可：

useEffect(() => {
  // 此处的items永远是最新的状态值
  console.log('items更新完成，最新值：', items);
  // 写items变化后需要执行的逻辑
}, [items])

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