Die Methode .map funktioniert in der Anwendung React nicht

Question

Die .map-Methode des Objekts funktioniert nicht und ich kann nicht mit dem Objekt der von mir importierten API interagieren. Auf der Konsole des Browsers habe ich das Objekt gelesen.

Dies ist ein Komponenten-Razze („Rennen“)

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;

Dies ist die Schnittstelle im Paketmodell

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

Fähigkeit, Objekte einzugeben

Answer 1

您收到的数据与您在界面中期望的数据不同。观察 api 结果 的属性并匹配属性名称。

我还建议您将代码保留为英文，以保持一致性和清晰性。

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

为您所在的州设置初始值。这也将使您的代码更加可预测和一致。如果您不想要初始状态，请确保类型反映这一点。

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