Promise.all未等待状态更新，React批量上传后useState取值为空如何解决

问题核心原因 #

1. 闭包陷阱：你在map的回调中调用setuploadedAttachments时，每次获取的uploadedAttachments都是当前函数闭包中的初始值（空数组），多次更新本质上都是往空数组里追加单条数据，最终状态本身就不对。
2. useState异步更新：React的状态更新是异步批处理的，Promise.all执行结束时，所有setuploadedAttachments的操作还未完成，你读取到的仍然是更新前的旧状态。

正确实现方案 #

推荐先收集所有上传结果，一次性更新状态，既避免闭包问题，也减少不必要的组件重渲染：

1. 改造上传触发函数

async function uploadAttachments(userID, id) {
  try {
    // 并行执行所有上传任务，收集所有返回结果
    const uploadPromises = attachments.map(val => services.uploadAttachment(val, userID, id));
    const responses = await Promise.all(uploadPromises);
    
    // 过滤异常结果，组装需要的元数据格式
    const uploadedList = responses.filter(Boolean).map(res => ({
      name: res.name,
      size: res.size
    }));
    
    // 一次性更新状态
    setuploadedAttachments(uploadedList);
    
    // 这里直接使用已经组装好的uploadedList即可，不需要等待状态更新
    console.log(JSON.stringify(uploadedList));
    // 后续接口直接传uploadedList调用即可
    // yourNextApi(uploadedList)
  } catch (e) {
    console.log("ERROR: " + e)
  }
}

2. 优化uploadAttachment实现

你原来的实现中自己包装了一层Promise，且异常捕获后没有抛出错误，会导致上传失败时Promise.all无法感知到异常，直接返回undefined，可以简化为：

async function uploadAttachment(val, userID, id) {
  const fullURL = BASE_URL + '/uploadFile'
  const data = new FormData()
  data.append(/* 你要追加的表单参数 */)
  const config = {
    /* 你的请求配置 */
  };

  // axios本身返回Promise，无需额外包装
  return axios.post(fullURL, data, config)
    .then(response => response.data)
    .catch(error => {
      console.log(error)
      Alert.alert("Error Occured", error);
      // 需要终止后续流程就抛出错误，需要忽略失败继续执行就return null
      throw error
    })
}

3. 如果必须等待状态更新完成再执行逻辑

如果你的后续逻辑强依赖React更新后的状态，可以用useEffect监听uploadedAttachments的变化：

useEffect(() => {
  // 上传完成的判断条件：已上传的数量等于待上传的数量，且待上传列表不为空
  if (uploadedAttachments.length === attachments.length && attachments.length > 0) {
    console.log("状态已更新完成，完整数据：", JSON.stringify(uploadedAttachments))
    // 调用你的后续函数
    yourNextFunction(uploadedAttachments)
  }
}, [uploadedAttachments, attachments])

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