React表单提交后input状态未正常更新，短暂生效后恢复输入值如何解决

问题根因 #

• 执行顺序错误：axios请求是异步操作，你将表单重置的setValues写在了请求逻辑外，会先于请求成功的回调执行。等到请求成功触发回调内的setValues时，用到的values是函数初始触发时的闭包旧值，存储着提交前的表单输入内容，直接覆盖了已经重置的状态，就出现了状态短暂更新后回滚的问题。
• 状态更新写法不规范：多次更新依赖前序状态时，没有使用函数式更新，容易因闭包拿到旧状态导致合并错误。
• 初始值定义不规范：uploadStatus的初始值直接赋值为Number构造函数，属于不合理的初始值。

修复方案 #

调整异步逻辑执行顺序，将表单重置和状态更新都放到请求成功回调内，同时使用函数式更新保证拿到最新状态。建议额外补充请求失败的catch分支处理异常场景。

修复后的状态定义代码 #

const [values, setValues] = useState({
    // 单文件上传相关状态
    singleFile: {},
    selectSingleFile: false,
    singleTitle: '',
    singleArtist: '',
    open: false,

    // 多文件上传相关状态
    multipleFiles: [],
    selectMultipleFiles: false,
    multipleTitle: '',
    multipleArtist: '',

    uploadStatus: 0, // 给定合理初始值，如0代表未上传、200代表上传成功等
  });

修复后的handleSubmit提交处理代码 #

const handleSubmit = (event) => {
    // 优先阻止表单默认提交行为
    event.preventDefault();

    const formData = new FormData();
    formData.append('title', values.singleTitle);
    formData.append('artist', values.singleArtist);
    formData.append('file', values.singleFile);

    let reqOptions = {
      url: '/music/singleFile',
      method: 'POST',
      data: formData,
    };
    axios.request(reqOptions).then(function (response) {
      console.log(response);
      // 使用函数式更新，拿到最新的prevState合并，避免闭包问题
      setValues(prev => ({ 
        ...prev, 
        uploadStatus: response.status,
        // 请求成功后再重置表单相关状态
        singleFile: {},
        selectSingleFile: false,
        singleTitle: '',
        singleArtist: '',
        open: true,
      }));
    });
  };

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