React应用中Uppy实例重渲染时如何保留已上传图片预览

问题根因 #

你的判断方向是对的，但核心原因不是useEffect触发重渲染，而是条件渲染直接卸载了UploadManager组件：
父组件中reporting ? <ReportForm/> : <UploadManager/>的写法，当reporting变为true时，整个UploadManager会从DOM树移除，组件销毁时会执行useEffect的清理函数，调用uppyInstance.close()把Uppy实例也销毁。当你切回上传页时，UploadManager重新挂载，Uppy实例重新初始化，自然回到默认状态，看不到之前的上传预览。

可选解决方案（按实现成本从低到高排序） #

方案1：用CSS隐藏替代条件卸载（推荐，改动最小） #

不用条件渲染判断展示ReportForm还是UploadManager，两个组件都渲染，用display控制显隐，这样UploadManager不会被卸载，Uppy实例一直保留，状态自然不会丢失，只要修改父组件的渲染逻辑即可：

{/* 返回按钮逻辑保留 */}
{reporting ? (
  <Button
    onClick={onBack}
    style={{ marginTop: 8, width: 'fit-content' }}
    display="back"
    id="BACK_TO_PHOTOS"
  />
) : null}

{/* 控制ReportForm显隐 */}
<div style={{display: reporting ? 'block' : 'none'}}>
  <ReportForm assetReferences={files} exifData={exifData} />
</div>
{/* 控制上传区域显隐 */}
<div style={{display: reporting ? 'none' : 'block'}}>
  <Grid item style={{ marginTop: 20 }}>
    <UploadManager
      onUploadStarted={() => setUploadInProgress(true)}
      onUploadComplete={() => setUploadInProgress(false)}
      assetSubmissionId={assetSubmissionId}
      exifData={exifData}
      setExifData={setExifData}
      files={files}
      setFiles={setFiles}
      alreadyFiles={alreadyFiles}
    />
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        marginTop: 20,
      }}
    >
      <InfoIcon fontSize="small" style={{ marginRight: 4 }} />
      <Text variant="caption">
        <FormattedMessage id="PHOTO_OPTIMIZE_1" />
        <Link
          external
          href="https://docs.wildme.org/docs/researchers/photography_guidelines"
        >
          <FormattedMessage id="PHOTO_OPTIMIZE_2" />
        </Link>
        <FormattedMessage id="PHOTO_OPTIMIZE_3" />
      </Text>
    </div>
  </Grid>
  <Grid item>
    <Button
      id={continueButtonText}
      display="primary"
      disabled={uploadInProgress}
      onClick={async () => {
        window.scrollTo(0, 0);
        setReporting(true);
      }}
      style={{ marginTop: 16 }}
    />
  </Grid>
</div>

方案2：初始化Uppy时手动恢复已上传文件 #

如果你一定要保留条件渲染的写法，可以在Uppy实例初始化完成后，把父组件存储的files手动添加回Uppy实例，就能恢复预览，修改UploadManager的useEffect逻辑即可：

useEffect(() => {
  const uppyInstance = Uppy({
    meta: { type: 'Report sightings image upload' },
    restrictions: {
      allowedFileTypes: ['.jpg', '.jpeg', '.png'],
    },
    autoProceed: true,
  });

  // 新增逻辑：把已上传的文件加回Uppy实例恢复预览
  files.forEach(file => {
    // 可根据你实际的file字段结构调整参数
    uppyInstance.addFile({
      id: file.path,
      name: file.path,
      type: 'image/jpeg',
      data: new Blob(), // 已上传完成的文件不需要存二进制数据
      meta: { uploadURL: `你的文件访问前缀/${file.path}` },
      preview: `你的文件访问前缀/${file.path}`, // 预览地址
      progress: { uploadComplete: true, percentage: 100 }, // 标记为已上传完成
    })
  })

  // 原有逻辑保留，注册Tus插件、事件监听、销毁逻辑
  uppyInstance.use(Tus, {
    endpoint: `${__houston_url__}/api/v1/asset_groups/tus`,
    headers: {
      'x-tus-transaction-id': assetSubmissionId,
    },
  });

  uppyInstance.on('upload', onUploadStarted);
  // 剩余原有事件监听逻辑不变
}, [files]) // 把files加入依赖，文件变更时同步更新Uppy列表

方案3：把Uppy实例提升到父组件 #

在父组件中创建Uppy实例，通过props传递给UploadManager，就算UploadManager被卸载，Uppy实例在父组件中不会被销毁，下次挂载直接复用原有实例即可，状态也不会丢失，适合多个组件共享Uppy状态的场景。

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