React中后端循环数据表格内单张图片预览问题解决

问题出在你用了**单一的state变量file**存储图片预览数据，所有表格单元格都会读取这个值，所以选择一张图片后，所有没有后端图片（el.FPHOTOPATH为空）的单元格都会显示这张图。要实现每个单元格独立预览，需要把预览数据和每一行的唯一标识（比如你的el.FREGNO）绑定起来。

具体修改步骤： #

1. 初始化状态时改用对象存储预览图
   把原来的file换成一个对象，用来存储每个FREGNO对应的预览数据：

   this.state = {
     // 其他原有状态...
     previewFiles: {} // 键是FREGNO，值是图片base64
   };
   

2. 修改文件选择后的预览逻辑
   在onFileChange方法里，把预览数据存在对应FREGNO的键下，而不是覆盖单一变量：

   onFileChange = (e, fregno) => {
     if (e.target.files && e.target.files[0]) {
       let reader = new FileReader();
       reader.onload = (e) => {
         // 更新previewFiles，只修改对应fregno的条目，保留其他行数据
         this.setState(prevState => ({
           previewFiles: {
             ...prevState.previewFiles,
             [fregno]: e.target.result
           }
         }));
       };
       reader.readAsDataURL(e.target.files[0]);
     }
   };
   

3. 修改表格单元格的img src引用
   让图片读取当前行FREGNO对应的预览数据，而不是全局的file：

   <Table.Cell textAlign="center">
     <div>
       <img
         src={
           el.FPHOTOPATH !== ""
             ? this.state.photo + this.props.univcode + "/" + el.FPHOTOPATH
             : this.state.previewFiles[el.FREGNO] || "" // 只取当前行的预览图
         }
         alt="Picture Not Found"
         style={{ height: "80px", width: "80px" }}
       />
       <input
         type="file"
         name="file"
         accept=" image/jpg, image/jpeg"
         onChange={(e) => this.onFileChange(e, el.FREGNO)}
       />
       <button onClick={() => this.onFileUpload(i, el.FREGNO)}>Upload</button>
     </div>
   </Table.Cell>
   

这样修改后，每个单元格选择的图片只会在自身显示，不会影响其他行的预览内容。

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