未捕获（承诺）TypeError：无法读取未定义的属性“ fisierUrl”

Question

我创建了一个React应用，我想从我的API中获取数据（图片网址）。 在Detali .js中，我编写了以下代码： Detalii.js

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import url from "../url";
import Header from "../components/Header";

const Detalii = () => {
  const [info, setInfo] = useState({});
  const { id } = useParams();
  useEffect(() => {
    async function getData() {
      try {
        const res = await fetch(`${url}/detalii/${id}`);
        const data = await res.json();
        setInfo(data);
      } catch (error) {
        console.log(error);
      }
    }
    getData();
  }, [id]);
  //console.log(info);
  return (
    <div className="bg-detalii">
      <Header info={info} />
    </div>
  );
};
export default Detalii;

在页眉组件中，我显示如下图像： Header.js：

import React from "react";

const Header = ({ info }) => {
  console.log(info);
  return (
    <div className="header">
      <img src={info.fisier.fisierUrl} className="img-detalii" alt="poza" />
      <p className="text-detalii">{info.nume}</p>
    </div>
  );
};
export default Header;

我的控制台info.fisier对象中的

如下所示：

在Detali.js中，当显示image时显示错误。如何解决？谢谢

Answer 1

尤其要注意array_push($arr, array_map(function($c) { return $c; },$grow->getArrayCopy())); 上的src={info.fisier.fisierUrl}。

开始时，您的请求正在进行中，并且您的info.fisier.fisierUrl等于info。

所以它是{}。 {}.fisier.fisierUrl是{}.fisier。并且undefined引发错误

如何修复：

尝试使用undefined.fisierUrl代替src={info.fisier.fisierUrl}

Answer 2

我认为问题在于您尝试在获取调用返回并调用<Header />之前渲染setInfo。

一种解决方案可能是仅在信息“真实”时才渲染Header。即

return (
    <div className="bg-detalii">
      {info && (<Header info={info} />)}
    </div>
  );