La méthode .map de l'objet ne fonctionne pas et je ne peux pas interagir avec l'objet de l'API que j'ai importé. Sur la console du navigateur, je lis l'objet.
Ceci est un composant razze("races")
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;
Voici l'interface dans le modèle de package
export interface RazzeArray {
count: number
razze: Razza[]
}
export interface Razza {
indice: number
name: string
url: string
}
Possibilité de saisir des objets
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Les données que vous recevez sont différentes de celles que vous attendiez dans l'interface. Observez les propriétés du résultat API et faites correspondre les noms de propriété.
Je vous recommande également de conserver votre code en anglais pour plus de cohérence et de clarté.
export interface IRaceList { count: number results: IRace[] } export interface IRace { index: number name: string url: string }Définissez les valeurs initiales pour votre état. Cela rendra également votre code plus prévisible et cohérent. Si vous ne voulez pas l'état initial, assurez-vous que le type le reflète.
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> )} </> ); };