Kaedah .map tidak berfungsi dalam aplikasi React
P粉495955986
P粉495955986 2024-04-02 21:52:34
0
1
374

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

P粉495955986
P粉495955986

membalas semua(1)
P粉127901279

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>
      )}
    </>
  );
};
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan