Kaedah .map tidak berfungsi dalam aplikasi React

Question

Kaedah .map objek tidak berfungsi dan saya tidak boleh berinteraksi dengan objek API yang saya import. Pada konsol penyemak imbas saya membaca objek itu.

Ini ialah komponen razze("perlumbaan")

const BASE_URL = "https://www.dnd5eapi.co/api/races";



const ListaRazze = () => {
  const [razze, setRazze] = useState<RazzeArray>();

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((results) => {
        console.log('result', results);
        setRazze(results);

        const prova = Object.values(results);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }, []);

  return (
    
     <>
      {razze && razze.razze ? (
        razze.razze.map(({ indice, name, url }) => (
          <div key={indice}>{name} {url}</div>
        ))
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};

export default ListaRazze;

Ini ialah antara muka dalam model pakej

export interface RazzeArray {
    count: number
    razze: Razza[]
  }
  
  export interface Razza {
    indice: number
    name: string
    url: string
  }

Keupayaan untuk memasukkan objek

Answer 1

Data yang anda terima berbeza daripada yang anda jangkakan dalam antara muka. Perhatikan sifat hasil api dan padankan nama hartanah.

Saya juga mengesyorkan agar anda menyimpan kod anda dalam bahasa Inggeris untuk ketekalan dan kejelasan.

export interface IRaceList {
  count: number
  results: IRace[]
}
  
export interface IRace {
  index: number
  name: string
  url: string
}

Tetapkan nilai awal untuk keadaan anda. Ini juga akan menjadikan kod anda lebih mudah diramal dan konsisten. Jika anda tidak mahu keadaan awal, pastikan jenis itu mencerminkan ini.

const RaceList = () => {
  const [raceList, setRaceList] = useState<IRaceList>({
    count: 0,
    results: []
  });

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((results: IRaceList) => {
        setRaceList(results);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }, []);

  return (
     <>
      {raceList.count ? (
        raceList.results.map(({ index, name, url }) => (
          <div key={index}>{name} {url}</div>
        ))
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};