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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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> )} </> ); };