React多实例组件设置文件仅更新首个实例状态 如何修复

该问题90%以上的场景是文件选择控件的ID重复导致的Label绑定逻辑错乱：

• 通常我们会把隐藏的input[type="file"]和可点击的label元素通过id + htmlFor属性绑定，实现点击自定义按钮触发文件选择的效果
• HTML规范要求页面内所有DOM的ID必须唯一，当你渲染多个组件实例时，如果给input写了固定的ID值，浏览器会默认将所有对应htmlFor的label点击事件，绑定到页面中第一个匹配该ID的input元素
• 此时点击后续组件实例的上传按钮，实际触发的是第一个组件的文件选择框，选完文件自然只会更新第一个组件的state
• 文本字段修改正常，是因为文本输入一般没有用ID绑定label，或者直接嵌套在label标签内，不会触发ID匹配逻辑

两种方案任选即可：

方案1：移除ID绑定，将input嵌套在label内部 #

不需要依赖ID做关联，嵌套结构会自动将label和内部的input绑定，是最简单的修复方式：

<label>
  上传文件
  <input 
    type="file" 
    onChange={handleFile}
    {/* 原有隐藏、accept等属性保留 */}
    style={{ display: 'none' }}
  />
</label>

方案2：为每个组件实例生成唯一ID #

如果必须要拆分label和input的结构，使用React内置的useId Hook为每个实例生成唯一ID做绑定（React18及以上版本支持，低版本可以自行用随机字符串/时间戳生成唯一值）：

import { useId, useState } from 'react';

function YourComponent() {
  // 生成实例唯一ID
  const fileInputId = useId();
  const [value, setValue] = useState({
    fileSrc: null,
    fileURL: '',
    name: '',
    desc: '',
    price: 0,
  });

  // 原有状态处理逻辑不变
  const handleFile = (e) => {
    setValue({
        ...value,
        fileSrc: e.target.files[0],
        fileURL: URL.createObjectURL(e.target.files[0])
    });
  };

  const handleValueChange = (prop) => (event) => {
    setValue({ ...value, [prop]: event.target.value });
  };

  return (
    <div>
      <label htmlFor={fileInputId}>上传文件</label>
      <input 
        id={fileInputId}
        type="file" 
        onChange={handleFile}
        style={{ display: 'none' }}
      />
      {/* 其他组件渲染逻辑 */}
    </div>
  )
}

额外优化提示 #

你当前代码中用URL.createObjectURL生成的临时URL，记得在组件卸载时调用URL.revokeObjectURL释放内存，避免造成内存泄漏：

import { useEffect } from 'react';

// 组件内部添加
useEffect(() => {
  return () => {
    if (value.fileURL) {
      URL.revokeObjectURL(value.fileURL);
    }
  }
}, [value.fileURL])

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