Die Methode .map funktioniert in der Anwendung React nicht
P粉495955986
P粉495955986 2024-04-02 21:52:34
0
1
278

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

P粉495955986
P粉495955986

Antworte allen(1)
P粉127901279

您收到的数据与您在界面中期望的数据不同。观察 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>
      )}
    </>
  );
};
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!