React实现Excel上传至API时，第二次上传同一文件操作失效

问题根因 #

这个现象是原生<input type="file">控件的固有行为导致的，和React的状态更新机制没有直接关系。
用户通过文件选择框选中一次文件后，DOM层面的input节点会记录当前已选中的文件值。如果提交完成后，只是清空了React里暂存的文件状态，没有同步重置DOM节点本身的value值，那么当用户再次选择和上一次完全相同的文件时，浏览器会判定input的选中值没有发生变化，根本不会触发change事件。
调试时看到的“无console输出、组件没触发重渲染”，本质就是change事件压根没执行，绑定的文件选择处理函数都没跑，自然不会有后续的状态更新流程。

落地修复方案 #

• 提交逻辑中，除了清空React侧的文件、预览图状态，必须手动重置文件上传input的DOM值。直接在提交事件的上下文里找到对应的input节点，把它的value设为空字符串，强制让DOM回到“未选中任何文件”的初始状态，参考改造后的代码：

  const [urlImg, setURLImg] = useState("");
  const [excelFile, setExcelFile] = useState(null);
  
  function handleOnSubmit(e) {
    e.preventDefault();
    // 原有状态清空逻辑
    setExcelFile(null);
    setURLImg("");
    // 新增：同步重置DOM层的input选中值
    const uploadInput = e.target.querySelector('input[type="file"]');
    uploadInput.value = '';
  }
  

• 原写法里无参调用setExcelFile()会把状态值设为undefined，建议改成显式传null作为空状态的初始值，避免后续处理文件时出现类型判断异常。
• 完成上述重置后，用户再次选择同一个文件时，因为input的value已经被清空，浏览器会正常触发change事件，文件选中、状态更新的流程就能正常执行，不会再出现重复选同个文件无响应的问题。

内容的提问来源于stack exchange，提问作者Kaung Khant Zaw