La méthode .map ne fonctionne pas dans l'application React

Question

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

Answer 1

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>
      )}
    </>
  );
};