React App组件报错：通过Node.js从MongoDB获取图片失败

问题分析 #

从代码和报错情况来看，核心问题有两个：

1. 无限重复请求后端：useEffect没设置依赖数组，组件每次渲染都会重新发起请求，既浪费资源还可能导致数据更新混乱。
2. 读取未定义属性报错：转换base64时直接访问singleData.img.data.data，如果后端返回的数据里某个项缺少img字段，或者img.data不存在，就会抛出Cannot read properties of undefined的错误。

修复步骤 #

• 给useEffect添加依赖数组
  修改useEffect，添加空依赖数组，确保仅在组件挂载时请求一次：

  useEffect(() => {
    axios
      .get("http://127.0.0.1:5000")
      .then((res)=>setData(res.data))
      .catch((err)=>console.log(err))
  }, []); // 添加空数组，避免重复请求
  

• 添加数据校验，避免读取undefined属性
  在遍历和转换base64前，先检查必要字段是否存在，同时给img添加key属性（React列表渲染要求）：

  { data.map((singleData, index)=>{
    // 先校验字段完整性
    if (!singleData?.img?.data?.data) {
      return <div key={index}>图片数据异常</div>;
    }
    const base64String = btoa( String.fromCharCode(...new Uint8Array(singleData.img.data.data)));
    return <img 
      key={index} 
      src={`data:image/png;base64,${base64String}`} 
      alt="图片" 
    />
  })}
  

• 可选：添加加载状态优化体验
  新增加载状态，在请求未完成时显示提示：

  const [data,setData] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    axios
      .get("http://127.0.0.1:5000")
      .then((res)=>{
        setData(res.data);
        setLoading(false);
      })
      .catch((err)=>{
        console.log(err);
        setLoading(false);
      })
  }, []);
  
  // 加载中显示提示
  if (loading) {
    return <div>加载中...</div>;
  }
  

额外检查 #

确认后端返回的数据结构是否符合预期：

• 确保每个singleData对象都包含img字段，且img.data.data是二进制数据数组（符合MongoDB存储图片的格式，比如GridFS返回结构）。
• 可以在请求成功的回调里打印res.data，确认数据结构和代码中访问的路径一致：

  .then((res)=>{
    console.log('后端返回数据:', res.data);
    setData(res.data);
  })
  

内容的提问来源于stack exchange，提问作者AJAY KUMAR YADAV