React+Antd图片上传组件无法显示数据库历史图片预览问题

你现在的问题是useState的初始值只会在组件第一次渲染时赋值，当你通过接口获取到facility数据后，testing变量更新了，但fileList的状态并不会自动跟着变——因为初始的useState初始化逻辑已经执行过了，不会再重新跑一遍。

你需要在facility数据加载完成后，手动更新fileList状态。可以通过添加一个监听facility变化的useEffect来实现：

1. 先把fileList的初始值设为空数组（或者根据需求设默认占位）
2. 新增useEffect，当facility变化时，检查是否有mainimage，如果有就更新fileList

修改后的关键代码如下：

// 初始fileList设为空数组
const [fileList, setFileList] = useState([]);

// 新增这个useEffect，监听facility的变化
useEffect(() => {
  if (facility?.mainimage) {
    // 当获取到历史图片URL时，更新fileList
    setFileList([
      {
        uid: '-1',
        name: facility.mainimage,
        status: 'done',
        url: facility.mainimage,
      }
    ]);
  }
}, [facility]); // 依赖项设为facility，当它变化时触发

// 保留原来的上传逻辑
const onUploadDraggerChange = ({ fileList: newFileList, file: resp }) => {        
  setFileList(newFileList);

  if (!resp || !resp.response || !resp.response.mainimage) {
    return;
  }
  message.success("Updated facility picture")
};

• 你原来的第一个useEffect没有加依赖项，会导致每次渲染都触发，建议补上依赖避免不必要的重渲染：

useEffect(() => {
  if (facility && !facility.is_owner) {
    navigate('/facilities')
  }
}, [facility, navigate]) // 补上依赖项

• 可以直接用facility?.mainimage替代testing变量，让代码更简洁。

这样修改后，当接口返回facility数据时，fileList会被自动更新，Antd的Upload组件就能正常显示历史图片的预览了。

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