如何修復“無法讀取未定義的屬性（讀取'front_default'）”？

我正在嘗試顯示來自 API 的一段資料，我可以訪問它，但它給了我一個未知錯誤，我找不到它的答案。
錯誤資訊：

Uncaught TypeError: Cannot read properties of undefined (reading 'front_default')

現在，這是有趣的部分，當我第一次啟動頁面時，它可以作業，但是如果我重繪 它，它會給我控制臺上的錯誤訊息和一個白屏頁面。

這是我的代碼中似乎不起作用的部分。

                <img src={urlData.sprites.front_default}></img>

但是，類似的資料可以作業，例如這一行：

                <p> {urlData.id}</p>

我將在這里發布所有代碼，但不要浪費您的時間閱讀所有代碼，請嘗試關注錯誤訊息和錯誤來源，以幫助我識別問題。

爸爸組件：

import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { PokemonContainer } from './components/Pokemon';

function App() {

  const [pokemonData, setPokemonData] = useState([]);
  const [loaded, setLoaded] = useState(false);

  const get_pokemon_data = async () => {
    setPokemonData((await axios.get('https://pokeapi.co/api/v2/pokemon?limit=9')).data.results);
  };

  useEffect(() => {
    get_pokemon_data();
  }, []);

  useEffect(() => {
    setLoaded(true);
  }, [pokemonData]);

  if (loaded) {
    return (
      <div>
        {pokemonData.map((pokemon: any) => (
          <PokemonContainer key={pokemon.name} url={pokemon.url} />
        ))}
      </div>
    );
  } else {
    return (
      <div>
        <p>wait a minute</p>
      </div>
    )
  }


};

export default App;

子組件：

import React, { useState, useEffect } from 'react';
import axios from 'axios';


export const PokemonContainer = (props: any) => {
    const [urlData, setURLData] = useState<any>([]);

    const [loaded, setLoaded] = useState<boolean>(false);



    useEffect(() => {
        const get_url_data = async () => {
            setURLData((await axios.get(props.url)).data);
        };
        get_url_data();
    }, []);

    useEffect(() => {
        setLoaded(true);
    }, [urlData]);

    if (loaded) {
        return (
            <div>
                <div key={urlData.name}>
                    <p> {urlData.name}</p>
                    <p> {urlData.id}</p>
                    <img src={urlData.sprites.front_default}></img>
                </div>
            </div>
        )
    } else {
        return (
            <div>
                <p>Loading...</p>
            </div>
        )
    }
};

uj5u.com熱心網友回復：

我認為問題出在你的第二個useEffect

    useEffect(() => {
        setLoaded(true);
    }, [urlData]);

當組件掛載時，這將設定loaded為true但尚未獲取回應并且urlData仍然是一個空陣列（我相信它應該是一個空物件），因此您會收到錯誤訊息。

解決此問題的一種方法是檢查是否urlData已在 useEffect 中獲取？如果是，則設定loaded為true.

但我認為這useEffecte根本不需要。而不是if(loaded)您可以檢查 oneurlData的屬性，例如：if(urlData.id)

子組件：

import React, { useState, useEffect } from 'react';
import axios from 'axios';


export const PokemonContainer = (props: any) => {
    const [urlData, setURLData] = useState<any>([]);

    useEffect(() => {
        const get_url_data = async () => {
            setURLData((await axios.get(props.url)).data);
        };
        get_url_data();
    }, []);

    if (urlData.id) {
        return (
            <div>
                <div key={urlData.name}>
                    <p> {urlData.name}</p>
                    <p> {urlData.id}</p>
                    <img src={urlData.sprites.front_default}></img>
                </div>
            </div>
        )
    } else {
        return (
            <div>
                <p>Loading...</p>
            </div>
        )
    }
};

或者你可以這樣做：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

export const PokemonContainer = (props: any) => {
  const [urlData, setURLData] = useState<any>([]);

  useEffect(() => {
    const get_url_data = async () => {
      setURLData((await axios.get(props.url)).data);
    };
    get_url_data();
  }, []);

  if (!urlData.id) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  return (
    <div>
      <div key={urlData.name}>
        <p> {urlData.name}</p>
        <p> {urlData.id}</p>
        <img src={urlData.sprites.front_default}></img>
      </div>
    </div>
  );
};

標籤：反应 打字稿 api

上一篇：如何在不使用類的情況下組合這兩個簡單的python檔案？

下一篇：如何在Flutter應用程式中撰寫此Python代碼？