React使用useState异步上传图片后表单提交数组为空问题咨询

核心问题根源 #

• 你用forEach遍历执行异步上传逻辑时，forEach不会等待异步函数执行完成，调用handleSubmit后会立刻执行后续的dispatch，此时上传请求还未返回，images仍为空数组
• 循环中调用setImages([...images, data])存在闭包陷阱，每次循环取到的都是当前渲染周期的初始images值，最终只会保留最后一次上传的结果
• React的setState是异步更新，就算上传请求在dispatch前返回，状态也不会立刻更新，读取到的还是旧值

修复代码 #

第一步：改造handleSubmit

// 改造为返回Promise的async函数
const handleSubmit = async () => {
  setLoadingUpload(true);
  try {
    // 把每个文件的上传请求封装成Promise，生成数组
    const uploadPromises = files.map(async (file) => {
      const bodyFormData = new FormData();
      bodyFormData.append('image', file);
      const { data } = await Axios.post('/api/uploads', bodyFormData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: `Bearer ${userInfo.token}`,
        },
      });
      return data;
    });
    // 等待所有上传完成，拿到所有图片url
    const uploadedImages = await Promise.all(uploadPromises);
    // 一次性更新state，避免循环更新的闭包问题
    setImages(prev => [...prev, ...uploadedImages]);
    setLoadingUpload(false);
    // 返回上传结果，方便后续直接使用不用等state更新
    return uploadedImages;
  } catch (error) {
    setErrorUpload(error.message);
    setLoadingUpload(false);
    throw error;
  }
}

第二步：改造submitHandler

// 改为async函数等待上传逻辑执行完成
const submitHandler = async (e) => {
  e.preventDefault();
  try {
    // 等待所有上传完成，拿到返回的图片url数组
    const uploadedImages = await handleSubmit();
    dispatch(
      createCard(
        name,
        // 直接用返回的上传结果，比读取state更可靠，不需要等待state异步更新
        [...images, ...uploadedImages]
      )
    );
  } catch (err) {
    // 可自行补充上传失败后的业务处理逻辑
    console.error('上传失败:', err);
  }
}

改造说明 #

• 用map配合Promise.all可以等待所有异步上传请求执行完成，保证拿到所有图片url之后再执行后续的dispatch逻辑
• 一次性批量更新images状态，避免了循环调用setImages产生的闭包陷阱，不会出现只有最后一条数据存入数组的问题
• 直接返回上传结果给上层调用方，不需要依赖React状态更新的时机，避免了state异步更新导致读不到最新值的问题

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