未捕獲（承諾）類型錯誤：無法讀取未定義的屬性“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>
  );