React动态上传图片时url始终为null问题排查求助

我编写了动态展示图片的React代码，状态中维护着一个包含{url: null, name: null}对象的数组。上传图片时，图片的name能正常获取，但url始终为null，无法定位原因。以下是完整代码：

父组件代码：

const [UploadLogos, setUploadLogos] = useState([
  { url: null, name: null}
])

const setParam = (Param, newParam, i) => {
  setUploadLogos([
    ...UploadLogos.slice(0, i),
    { ...UploadLogos[i], [Param]: newParam },
    ...UploadLogos.slice(i + 1),
  ])
}

{
  UploadLogos.map((Logo, i) => (
    <ImageUpload
      key={i}
      Image={Logo.url}
      setImage={(prev) => setParam("url", prev, i)}
      Name={Logo.name}
      setName={(prev) => setParam("name", prev, i)}
    />
  ))
}

ImageUpload.jsx

export function ImageUpload({Image, setImage, Name, setName}) {
    return (
      <>
        <input 
            type="file" accept="image/png" onChange={event => { 
                const ImageURL = URL.createObjectURL(event.target.files[0])
                const ImageName = event.target.files[0]['name']

                setImage(ImageURL)                  
                setName(ImageName)
                
                console.log(ImageURL) // 输出 blob:http://localhost......
                console.log(Image) // 输出 null
                
                console.log(ImageName) // 输出 simpleImage.png
                console.log(Name) // 输出 simpleImage.png
              
            }} 
        />
      </>   
    )
}

控制台显示调用setImage(ImageURL)后，Image仍为null，请问错误原因是什么？

1. 状态更新被覆盖：React的useState更新是异步的，你写的setParam函数直接引用了当前的UploadLogos状态。当在onChange中连续调用setImage和setName时，这两个操作都会基于同一个旧的UploadLogos状态修改数据，后执行的setName会覆盖掉setImage的修改，最终只有name被更新，url还是旧值null。
2. 即时打印的是旧值：调用setImage后立刻打印的Image是组件当前的props值，此时状态更新还未完成，组件也没重新渲染，所以显示的是旧值null，这是React状态更新的正常特性，不是bug，但会让你误以为url没被更新。

修改setParam函数，使用函数式更新获取最新状态，确保每次修改都基于最新的数组数据，避免覆盖问题：

const [UploadLogos, setUploadLogos] = useState([
  { url: null, name: null}
])

// 改用函数式更新，参数prevUploadLogos是最新的状态值
const setParam = (Param, newParam, i) => {
  setUploadLogos(prevUploadLogos => [
    ...prevUploadLogos.slice(0, i),
    { ...prevUploadLogos[i], [Param]: newParam },
    ...prevUploadLogos.slice(i + 1),
  ])
}

{
  UploadLogos.map((Logo, i) => (
    <ImageUpload
      key={i}
      Image={Logo.url}
      setImage={(newUrl) => setParam("url", newUrl, i)}
      Name={Logo.name}
      setName={(newName) => setParam("name", newName, i)}
    />
  ))
}

另外补充：如果后续要动态添加/删除图片项，建议不要用数组索引作为key，最好给每个图片项生成唯一标识（比如文件名+时间戳）作为key，避免组件复用导致的异常。

内容的提问来源于stack exchange，提问作者s.kuznetsov