React中如何将图片URL存入AddProjects.Img状态属性？

问题出在你的imgChange函数里——你直接把生成的图片URL赋值给了整个AddProjects状态，替换了原本的对象结构。这时候AddProjects从包含name、Discription、git、Img的对象变成了字符串，所以AddProjects.Img会是undefined，但直接用AddProjects时刚好就是那个URL，因此能正常显示。

只需要修改imgChange函数，保持状态的对象结构，仅更新Img字段：

function imgChange(e) {
  console.log(e.target.files);
  // 先判断是否选中了文件
  if (!e.target.files[0]) return;
  
  setAddProjects((prevProjects) => ({
    ...prevProjects, // 保留原有所有属性
    Img: URL.createObjectURL(e.target.files[0]) // 仅更新Img字段
  }));
}

修改后，AddProjects始终保持对象结构，AddProjects.Img就能正确存储图片的临时URL，<img src={AddProjects.Img} alt="" />也能正常工作了。

额外提醒：临时对象URL会占用浏览器资源，建议在组件卸载时释放，可添加useEffect：

import { useEffect } from 'react';

// 在组件内部添加
useEffect(() => {
  return () => {
    if (AddProjects.Img) {
      URL.revokeObjectURL(AddProjects.Img);
    }
  };
}, [AddProjects.Img]);

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