反应js redux字段数组文件输入问题

Question

从表中删除行（即redux字段数组）时，文件输入存在问题。

删除第一行时，文件输入名称不变。

table.js（FieldArray组件）

<td>
         <Field
          name={`${member}.file`}             
          component={UploadFile}
          id={index}                          
         />
   </td>

UploadFile.js

return (
   <div className={className} >
    <div>
      {label && <label>{label}</label>}
      <div>
        <input
          name={input.name}
          type="file"
          accept={accept}
          onChange={this.onChange}
          style={style}              
          id={`file${id}`}
        />
      </div>
    </div>
    <span className="input-error-msg">
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </span>
  </div>
);

我认为这个问题与HTML绑定有关。

Answer 1

通过使用唯一ID作为键而不是Omar Sy建议的map函数内部的索引来解决该问题。