React中如何正确移除渲染列表内的文件输入元素？

问题根源 #

1. 用数组index作为React元素key：移除元素后，后续组件的key会发生偏移，React会复用之前的DOM节点，导致文件输入框的选中状态和数组项错位。
2. 文件输入框的特殊性：<input type="file">是非受控组件，出于浏览器安全限制，无法通过value属性直接控制它的选中值，所以即使状态更新，旧的DOM节点仍会保留之前的选中文件。

解决步骤 #

1. 给每个字段项添加唯一标识 #

用唯一ID代替index作为React元素的key，确保每个组件能被React准确识别，避免DOM复用导致的状态混乱。可以用uuid库生成唯一ID，也可以自己实现简单的唯一ID生成逻辑。

2. 修改状态与相关方法 #

所有操作（添加、修改、删除）都通过唯一ID定位数组项，不再依赖易变的index。

完整代码修改示例 #

安装依赖（可选，若自己生成ID可跳过）

npm install uuid

状态初始化与添加方法

import { v4 as uuidv4 } from 'uuid';

const [fileuploadFields, setFileuploadFields] = useState([
  { id: uuidv4(), type: '', file: null },
]);

const addFields = () => {
  const newField = {
    id: uuidv4(),
    type: '',
    file: null
  };
  // 使用函数式更新确保获取最新状态
  setFileuploadFields(prevState => [...prevState, newField]);
};

渲染部分

<div>
  <div className="mb-1">
    <Label text="Upload Attachment" />
  </div>
  {fileuploadFields.map((form) => {
    return (
      <div className="flex mb-2" key={form.id}>
        <input 
          name="type"
          placeholder="File type (e.g: SLA)"
          onChange={(event) => handleFileTypeTextChange(event, form.id)}
          value={form.type}
          required
        />

        <input 
          name="file"
          onChange={(event) => handleFileChange(event, form.id)}
          type="file"
          required
        />
        {fileuploadFields.length > 1 && (
          <button 
            className="ml-2" type="button"
            onClick={() => removeField(form.id)}
          >
            <FaMinusCircle className="text-primary" title="Remove"></FaMinusCircle>
          </button>
        )}
      </div>
    );
  })}
</div>

文本输入框变更方法

const handleFileTypeTextChange = (event, fieldId) => {
  const inputValue = event.target.value;
  setFileuploadFields(prevState => 
    prevState.map(field => 
      field.id === fieldId ? { ...field, type: inputValue } : field
    )
  );
};

文件选择变更方法

const handleFileChange = (event, fieldId) => {
  const selectedFile = event.target.files[0];
  setFileuploadFields(prevState => 
    prevState.map(field => 
      field.id === fieldId ? { ...field, file: selectedFile } : field
    )
  );
};

移除字段方法

const removeField = (fieldId) => {
  setFileuploadFields(prevState => 
    prevState.filter(field => field.id !== fieldId)
  );
};

为什么这样能解决问题 #

• 唯一ID作为key：React会根据key精准识别每个组件，移除项时会销毁对应的DOM节点，不会复用旧的文件输入框，新渲染的输入框是干净的初始状态。
• 用ID定位数组项：避免了index随数组元素增减而变化导致的状态错位，所有操作都基于固定的唯一标识，状态更新更可靠。

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