Cloudinary最新上传图片覆盖React表单所有展示图片如何解决？

问题根源 #

• 上传图片后仅将返回的URL赋值给全局image状态，若所有图片渲染逻辑都绑定该全局变量，就会出现全部图片同步更新为最新地址的问题
• 未将Cloudinary返回的URL同步存入state对应条目的url字段，无法实现每条曲目对应独立图片地址的需求

修复步骤 #

1. 调整上传成功后的状态更新逻辑，直接把图片地址写入对应条目的url字段，无需额外维护全局image状态
2. 渲染图片时取每个条目自身的url字段，不要绑定全局通用的图片状态

代码修改示例 #

上传逻辑调整

const uploadImage = () => {
    const formData = new FormData()
    formData.append('file', imageSelected)
    formData.append('upload_preset', 'musicimages')
    Axios.post(
        'https://api.cloudinary.com/v1_1/dklcmfo0q/image/upload', 
        formData
    )
    .then((res) => {
        const newImgUrl = res.data.url
        // 若为新增曲目场景，更新newTrack的url字段
        setState(prev => ({
            ...prev,
            newTrack: {
                ...prev.newTrack,
                url: newImgUrl
            }
        }))
        // 若为编辑已有曲目场景，替换上方逻辑为更新对应track的url，示例：
        // setState(prev => {
        //   const newTracks = [...prev.tracks]
        //   newTracks[当前编辑曲目索引] = {...newTracks[当前编辑曲目索引], url: newImgUrl}
        //   return {...prev, tracks: newTracks}
        // })
    })
}

渲染逻辑调整

// 已有曲目列表渲染，取单条自身url
{state.tracks.map((item, idx) => (
  <div key={idx}>
    <img src={item.url} alt={`${item.track}封面`} />
    {/* 其他曲目信息渲染 */}
  </div>
))}

// 新增表单的最新上传图片预览，取newTrack的url，仅展示最新上传的单张
<img src={state.newTrack.url} alt="上传封面预览" />

优化建议 #

可以删除额外定义的全局image状态，所有图片地址统一存在对应条目的url字段中，避免多状态不同步引发的渲染异常。

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