React中useState的setValues更新images数组不生效问题排查

问题根源 #

你遇到的问题本质是React的状态更新是异步的。当你调用setValues后，React不会立刻修改values变量，而是把这次更新放进任务队列，等当前代码执行完、组件重新渲染时才会真正更新状态。所以你紧接着写的console.log(values.images)，读的还是更新前的旧值，并不是更新失败了。

怎么确认更新真的生效了？ #

有两种简单的方法：

• 用useEffect监听values.images的变化，状态更新后它会自动触发：

  useEffect(() => {
    console.log(values.images); // 这里能拿到更新后的新对象数组
  }, [values.images]);
  

• 直接打印你生成的newArray，如果这个数组是符合预期的对象数组，那说明转换逻辑没问题，状态肯定会在组件下一次渲染时更新。

更稳妥的状态更新写法（可选） #

如果你的状态更新依赖于之前的状态值，建议用函数式更新的方式，这样能确保拿到的是最新的前一次状态，避免异步更新带来的状态过期问题：

setValues(prevValues => ({
  ...prevValues,
  images: prevValues.images.map(file => ({
    default: 0,
    file: file
  }))
}));

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