Ant Design与ReactJS实现动态添加图片数据时图片不显示问题求助

问题定位与修复方案 #

核心错误点 #

• Hook使用违规：AddImg4是在循环中调用的普通渲染函数，内部不允许声明useState，违反React Hook只能在组件顶层调用的规则，直接导致图片预览状态无法正常留存、渲染异常。
• 图片数组更新逻辑错误：原代码中reader.onload = () => {[...setImg(reader.result)]}属于完全错误的写法，setImg是状态更新函数，调用返回值为undefined，无法展开生成新数组，图片数据根本没有存入Img1数组。
• Form.List表单项配置错误：动态生成的输入项name直接写死为Hobi，没有绑定field.name，会导致所有输入项共享同一个值，表单数据存储混乱。
• 图片状态与动态表单行没有关联：删除表单行时，存储的图片数组无法对应删除指定项，会出现图片和输入内容不匹配的问题。

修复后的完整代码 #

import React, { useState } from 'react'
import { Button, Form, Input } from 'antd';
import { 
  PlusOutlined,
  MinusCircleOutlined,
} from '@ant-design/icons';

// 将AddImg4抽离为合法独立组件，接收必要props
const AddImg4 = ({ kd, onImgChange, imgPrev }) => {
  const ImgC1 = (e) => {
    const vImg = e.target.files[0];
    if (!vImg) return;
    // 生成预览链接
    const previewUrl = URL.createObjectURL(vImg);
    // 转base64存储
    const reader = new FileReader();
    reader.readAsDataURL(vImg);
    reader.onload = () => {
      onImgChange(kd, reader.result, previewUrl);
    }
  }

  return (
    <Form.Item className='imgHobi'>
      <Input id={'uImg4' + kd} type="file" accept=".jpg,.jpeg,.png" onChange={ImgC1} hidden />
      <label htmlFor={'uImg4' + kd}>
        {imgPrev ? (
          <div className='imgLoad'> 
            <img src={imgPrev} className='getImg' alt=''/>
          </div>
        ) : (
          <div className='imgLoad'> 
            <div className='UpImg'>
              <div className='UpCore'>
                <PlusOutlined style={{fontSize:'20px'}}/>
              </div>
            </div>
          </div>
        )}
      </label>
    </Form.Item>
  )
}

function Ad_abhb() {
  // 分别存储图片base64数组、预览链接数组
  const [imgList, setImgList] = useState([]);
  const [previewList, setPreviewList] = useState([]);
  const [form] = Form.useForm();

  // 图片变更回调，同步更新对应索引的图片数据
  const handleImgChange = (index, base64, preview) => {
    const newImgList = [...imgList];
    newImgList[index] = base64;
    setImgList(newImgList);

    const newPreviewList = [...previewList];
    newPreviewList[index] = preview;
    setPreviewList(newPreviewList);
  }

  // 删除行时同步删除对应图片数据
  const handleRemove = (index, remove) => {
    remove(index);
    const newImgList = [...imgList];
    newImgList.splice(index, 1);
    setImgList(newImgList);
    const newPreviewList = [...previewList];
    newPreviewList.splice(index, 1);
    setPreviewList(newPreviewList);
  }

  const SimpanA4 = () => {
    form.validateFields().then(values => {
      // 合并表单内容和图片数据提交
      const submitData = values.Hobi.map((text, i) => ({
        text,
        img: imgList[i] || ''
      }));
      console.log('提交数据：', submitData);
    })
  }

  return (
    <>
      <h1>hobi</h1>
      <div className='konten'>
        <Form form={form}>
          <Form.List name='Hobi'>
            {(fields, { add, remove }) => (
              <>
                {fields.map((field, i) => {
                  return (
                    <div key={field.key} className='cardAdminMod hobiList' >                   
                      <AddImg4 
                        kd={i} 
                        onImgChange={handleImgChange}
                        imgPrev={previewList[i]}
                      />
                      {/* 绑定field.name作为输入项name */}
                      <Form.Item className='inputHobi' name={[field.name]} {...field}>
                        <Input />
                      </Form.Item>
                      {fields.length > 1 ? (
                        <div className='rmHobi'>
                          <MinusCircleOutlined onClick={() => handleRemove(field.name, remove)} />
                        </div>
                      ): null}
                    </div>
                  )
                })}
                <Form.Item className='addPlusHobi'>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    Add Data
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form>
      </div>
      <div className="titleAdmin butSide">  
        <Button onClick={SimpanA4}>Save</Button>   
      </div>
    </>
  )
}

export default Ad_abhb;

修复说明 #

• 把图片上传组件抽离为独立的AddImg4组件，符合Hook调用规则，预览状态通过props从父组件传入管理
• 修正了图片数组的更新逻辑，新增/删除表单行时同步更新对应索引的图片数据和预览链接
• 修正了Form.List的输入项name绑定，保证每个输入项的存储路径唯一
• 提交时合并表单文本内容和对应图片数据，可直接使用

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