React路由二次跳转时ImagePicker子组件未渲染问题

核心问题 #

1. useEffect未监听props变化：当前useEffect依赖数组为空，仅在组件首次挂载时执行图片转换逻辑。从数据表格返回后再次进入编辑页，props.data已更新但useEffect不会重新触发，导致imageFiles始终为空数组，ImagePicker显示加载状态。
2. 异步逻辑处理错误：convertImageUrlToFiles中toDataURL是异步操作，但直接同步调用setImageFiles(tempFiles)，此时tempFiles还未被异步填充，后续then中添加文件不会触发组件状态更新。
3. 组件key设置不合理：ImagePicker的key使用imageFiles数组（引用类型），当imageFiles未更新时，key不变可能导致组件无法感知props变化。

修复步骤 #

1. 更新useEffect依赖 #

将data加入useEffect依赖数组，确保每次props.data变化时重新执行图片转换：

useEffect(() => {
    const initialImageFiles = imageFilesInitialStateFunc()
    convertImageUrlToFiles(initialImageFiles)

    return () => {
        console.log('pressed back')
    }
}, [data]) // 添加data作为依赖

2. 修复异步文件转换逻辑 #

使用Promise.all等待所有图片转换完成后再更新状态，保证imageFiles能正确获取所有File对象：

const convertImageUrlToFiles = async (files) => {
    const tempFiles = await Promise.all(files.map(async (file) => {
        const imageUrl = constructMediaCDNUrl(`product_images/${file.image}`, 200)
        const dataUrl = await toDataURL(imageUrl)
        return dataURLtoFile(dataUrl, file.image)
    }))
    setImageFiles(tempFiles)
}

3. 优化ImagePicker的key设置 #

改用当前编辑数据的唯一标识（比如data.id）作为ImagePicker的key，确保每次进入不同行的编辑页时组件能正确重新渲染：

<ImagePicker key={data.id} files={imageFiles} setFiles={setImageFiles}/>

4. 额外优化：清理Object URL #

在EditComponent的卸载回调中清理创建的Object URL，避免内存泄漏：

useEffect(() => {
    const initialImageFiles = imageFilesInitialStateFunc()
    convertImageUrlToFiles(initialImageFiles)

    return () => {
        imageFiles.forEach(file => URL.revokeObjectURL(file))
    }
}, [data])

验证效果 #

修改后，返回数据表格再进入不同行的编辑页时，useEffect会根据新的data重新执行图片转换，异步逻辑保证所有File对象生成后再更新状态，ImagePicker能正确渲染图片。

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