React后台表格CSV上传异常：所有文件绑定同一行ID求助

核心问题是所有文件输入框共用了同一个id="csv"，而<label>的htmlFor属性会绑定页面中第一个匹配该id的元素。这导致无论点击哪一行的「Upload csv」按钮，实际触发的都是第一行的文件选择框，自然传递的bag._id永远是第一行的ID。

修复步骤 #

1. 给每行的文件输入框生成唯一ID，可以结合bag._id或index实现，确保每行的input id不重复
2. 同步修改对应label的htmlFor属性，与input的id保持一致

修正后的代码示例 #

{bagsData.map((bag, index) => (
  <tr name={bag._id} key={bag._id} tabIndex={index}> {/* 建议用bag._id做key，比index更稳定 */}
    <td>{bag.name}</td>
    <td>{bag.description}</td>
    <td>{bag.material}</td>
    <td><img className='bag-photo' src={bag.photo}/></td>
    <td><button className='reject-button' onClick={async () => await deleteBag(bag._id)}>Delete</button></td>
    <td><button className='change-button'>Change</button></td>
    <td className='csv-uploader'>
        {/* 用bag._id生成唯一的id和htmlFor */}
        <label htmlFor={`csv-${bag._id}`} className='change-button'>Upload csv</label>
        <input id={`csv-${bag._id}`} type="file" name="uuid-csv" onChange={(event) => handleUploadCsv(event, bag._id)}/>
    </td>
  </tr>
))}

额外提示 #

• 避免用index作为React列表的key，当列表项顺序变化或增删时，会引发不必要的渲染异常，用bag._id这种唯一标识更可靠
• 修复后可以在handleUploadCsv中先打印bag._id，确认每次上传都能拿到对应行的正确ID

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