React异步函数中如何获取组件状态的实际值？

我是React新手，在处理包含受控组件的表单时遇到了问题：需要在异步函数中获取组件的状态值并发送给REST API，但直接在onSubmit的异步回调里调用数据收集方法只能拿到空值，无法获取组件的实际状态。

我尝试了两种可行方案，但不确定是否符合规范，想知道有没有更合适的解决方法。

方案一：使用useEffect钩子 #

const [comment1, setComment1] = useState('');
const [comment2, setComment2] = useState('');
const [comment3, setComment3] = useState('');
const [imageS3URL1, setImageS3URL1] = useState('');
const [imageS3URL2, setImageS3URL2] = useState('');
const [imageS3URL3, setImageS3URL3] = useState('');

const [submitData, setSubmitData] = useState(false);

const dataToSubmit = () => {
  const data = {
    comment1: comment1,
    image1: imageS3URL1,
    comment2: comment2,
    image2: imageS3URL2,
    comment3: comment3,
    image3: imageS3URL3,
  };
  console.log('submitData', data);
};

useEffect(() => {
  setSubmitData(false);
  submitData && dataToSubmit();
}, [submitData]);

const onSubmit = async (e: any) => {
  e.preventDefault();
  Promise.all([
    //@ts-ignore
    refS3Uploader1.current.uploadFile(),
    //@ts-ignore
    refS3Uploader2.current.uploadFile(),
    //@ts-ignore
    refS3Uploader3.current.uploadFile(),
  ]).then(values => {
    setSubmitData(true);
  });
};

方案二：直接在组件渲染时判断状态 #

// ... 省略状态定义部分
const [submitData, setSubmitData] = useState(false);

const onSubmit = async (e: any) => {
  e.preventDefault();
  Promise.all([
    //@ts-ignore
    refS3Uploader1.current.uploadFile(),
    //@ts-ignore
    refS3Uploader2.current.uploadFile(),
    //@ts-ignore
    refS3Uploader3.current.uploadFile(),
  ]).then(values => {
    setSubmitData(true);
  });
};

const dataToSubmit = () => {
  const data = {
    comment1: comment1,
    image1: imageS3URL1,
    comment2: comment2,
    image2: imageS3URL2,
    comment3: comment3,
    image3: imageS3URL3,
  };
  console.log('submitData', data);
};

if (submitData === true) {
  setSubmitData(false);
  dataToSubmit();
} 

问题根源与优化方案 #

为什么直接在then里调用拿不到值？ #

uploadFile执行完成后，ImageS3Upload组件会通过onChange更新imageS3URL状态，但React的状态更新是异步的。在Promise.all的then回调里直接调用数据收集方法时，状态还没有完成更新，所以拿到的是旧的空值。

更规范的解决方法 #

不需要额外的submitData状态来触发提交，而是通过监听图片URL状态和上传完成标记，确保所有状态更新完成后再处理提交：

const Example4 = () => {  
  // ... 省略其他状态和配置定义

  const [allUploadsCompleted, setAllUploadsCompleted] = useState(false);

  // 监听上传完成状态和所有表单状态，确保都更新后处理数据
  useEffect(() => {
    if (allUploadsCompleted && imageS3URL1 && imageS3URL2 && imageS3URL3) {
      const data = {
        comment1: comment1,
        image1: imageS3URL1,
        comment2: comment2,
        image2: imageS3URL2,
        comment3: comment3,
        image3: imageS3URL3,
      };
      console.log('submitData', data);
      // 此处添加发送REST API请求的逻辑
      setAllUploadsCompleted(false); // 重置上传完成标记
    }
  }, [allUploadsCompleted, imageS3URL1, imageS3URL2, imageS3URL3, comment1, comment2, comment3]);

  const onSubmit = async (e: any) => {
    e.preventDefault();
    setSubmitButtonDisabled(true);
    try {
      const values = await Promise.all([
        //@ts-ignore
        refS3Uploader1.current.uploadFile(),
        //@ts-ignore
        refS3Uploader2.current.uploadFile(),
        //@ts-ignore
        refS3Uploader3.current.uploadFile(),
      ]);
      setSubmitButtonDisabled(false);
      const allSuccess = values.every(value => value);
      if (allSuccess) {
        setAllUploadsCompleted(true); // 标记所有上传完成
      }
    } catch (error) {
      setSubmitButtonDisabled(false);
      console.error('上传失败:', error);
    }
  };

  // ... 省略其他方法和渲染部分
};

优化点说明 #

1. 用async/await替代then链式调用，代码更简洁易读
2. 通过allUploadsCompleted标记上传完成，结合useEffect监听所有依赖状态，确保状态更新完成后再处理数据
3. 添加try/catch捕获上传异常，提升代码鲁棒性
4. 移除冗余的submitData状态，逻辑更清晰

另外，还可以优化状态结构，把表单数据合并为一个对象，减少重复代码：

const [formData, setFormData] = useState({
  comment1: '',
  comment2: '',
  comment3: '',
  imageS3URL1: '',
  imageS3URL2: '',
  imageS3URL3: '',
});

// 输入框 onChange 示例
onChange={(e) => setFormData(prev => ({ ...prev, comment1: e.target.value }))}

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