方法 .map 在應用程式 React 中不起作用

Question

物件的.map方法不起作用，我無法與我匯入的API的物件互動。在瀏覽器的控制台上我讀取了該物件。

這是一個元件 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;

這是套件模型中的介面

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

能夠進入物件

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