React中await后useState状态不更新：多文件上传状态无法更新

问题原因 #

你这段代码里状态无法正常更新的核心原因有两个：

1. React状态更新的异步合并机制：循环中连续调用setTradeFilesToUpload，React会合并多次同引用的状态更新，导致中间的started状态被直接覆盖，页面不会触发对应渲染。
2. 引用未变更：始终在修改同一个tradeFileListNew数组的内容，没有创建新的引用。React依赖浅比较判断是否重新渲染，引用不变的话，组件不会更新。

修复后的代码 #

const uploadFiles = async() => {
  for (const file of tradeFileList) {
    if (file.status !== "not-yet") continue;

    // 函数式更新，基于最新状态创建新数组与对象
    setTradeFilesToUpload(prev => 
      prev.map(item => 
        item === file ? {...item, status: "started"} : item
      )
    );

    const formData = new FormData();
    formData.append("file", file.file);
    formData.append("service_type", "attachments");

    await api.uploadCompanyFile(formData);

    // 再次用函数式更新标记上传完成
    setTradeFilesToUpload(prev => 
      prev.map(item => 
        item === file ? {...item, status: "completed"} : item
      )
    );
  }
};

关键优化点 #

• 函数式状态更新：使用setTradeFilesToUpload(prev => ...)，每次更新都基于组件最新的状态，避免异步更新导致的状态不一致。
• 创建新引用：用map返回新数组、扩展运算符{...item}创建新对象，确保React能检测到状态变化并触发重新渲染。
• 简化遍历逻辑：直接遍历原状态列表，跳过已上传文件，省去额外的索引查找操作。

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