未捕获（承诺）类型错误：无法读取未定义的属性“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 组件中，我显示这样的图像：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 中，它显示图像时显示错误。如何修复它？ 谢谢

Answer 1

查看src={info.fisier.fisierUrl}尤其是info.fisier.fisierUrl 。

一开始，您的请求正在进行中，您的info等于{} 。

所以它是{}.fisier.fisierUrl 。 {}.fisier undefined 。 并且undefined.fisierUrl抛出错误

怎么修：

而不是src={info.fisier.fisierUrl}尝试src={info && info.fisier && info.fisier.fisierUrl}

Answer 2

我认为问题在于您尝试在 fetch 调用返回并调用setInfo之前呈现<Header /> 。

一种解决方案可能是仅在信息“真实”时呈现Header 。 IE

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