React同一异步函数中如何正确完成两次state更新

updateGalleryState里直接读取的gallery是组件当前渲染作用域下的状态快照，和onSubmitImage函数本身的生命周期绑定：异步等待接口返回的过程中，组件没有触发重渲染，闭包捕获的gallery值永远停留在第一次setGallery执行前的初始值，自然找不到刚插入的loading状态项，最终导致更新失效。

完全采用函数式setState写法，绕开闭包捕获旧值的问题，两次排队的状态更新由React自动按顺序应用，不需要手动读取外部的状态值做匹配：

• 所有依赖前序状态的更新逻辑，统一在setState的回调函数中完成，回调接收的prevState永远是应用完所有排队更新后的最新状态。
• 不需要把更新逻辑拆分出依赖外部状态的独立函数，减少冗余代码的同时避免状态读取不一致的问题。

完整可运行代码 #

const [gallery, setGallery] = useState([]);

const onSubmitImage = async () => {
  // 生成唯一标识，和插入的loading项绑定
  const tempItemId = crypto.randomUUID();

  // 第一次状态更新：插入loading占位项
  setGallery(prevState => [
    ...prevState,
    { id: tempItemId, imgUrl: "", status: "loading" }
  ]);

  // 异步请求接口
  const response = await fetch("API etc..");
  const data = await response.json();

  // 第二次状态更新：直接在setState回调里完成匹配、更新逻辑
  // 这里拿到的prevState已经包含了第一次插入的loading项
  setGallery(prevState => prevState.map(item => {
    if (item.id === tempItemId) {
      return {
        ...item,
        imgUrl: data.imgUrl,
        status: "uploaded"
      }
    }
    return item;
  }));
}

如果需要把单条状态更新的逻辑抽成独立通用函数，也不要让函数依赖外部闭包捕获的状态值，直接在函数内部调用带函数式回调的setState即可：

// 通用更新函数，不依赖外部的gallery状态
const updateGalleryItem = (itemId, newProps) => {
  setGallery(prevState => prevState.map(item => 
    item.id === itemId ? { ...item, ...newProps } : item
  ));
}

// 在onSubmitImage中调用
const onSubmitImage = async () => {
  const tempItemId = crypto.randomUUID();
  setGallery(prev => [...prev, { id: tempItemId, imgUrl: "", status: "loading" }]);

  const response = await fetch("API etc..");
  const data = await response.json();
  // 直接传入唯一标识和要更新的属性即可
  updateGalleryItem(tempItemId, { imgUrl: data.imgUrl, status: "uploaded" });
}

常见误区提醒：

• 永远不要在异步逻辑里直接读取组件作用域内的状态值做计算、匹配操作，这类值都是当前渲染周期的快照，不会随着中间排队的状态更新自动同步。
• 你之前写的独立更新函数里还存在变量名不匹配的小问题：传入的参数是imgUrl，实际赋值时用了未定义的url变量，即使解决了闭包问题，也会出现赋值报错。

内容的提问来源于stack exchange，提问作者J. Diaz