React中API数据结构不匹配导致.map失效的解决方案与最佳实践

// models.ts (接口定义)
export interface RazzeArray {
    count: number
    razze: Razza[] // 预期为 'razze'
}

export interface Razza {
    indice: number // 预期为 'indice'
    name: string
    url: string
}

// ListaRazze.tsx (组件)
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('API Result:', results); // API返回 { count: N, results: [...] }
        setRazze(results);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }, []);

  return (
    <>
      {razze && razze.razze ? ( // 尝试访问 razze.razze
        razze.razze.map(({ indice, name, url }) => ( // 尝试使用 indice
          <div key={indice}>{name} {url}</div>
        ))
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};

{
  "count": 55,
  "results": [
    {
      "index": "dragonborn",
      "name": "Dragonborn",
      "url": "/api/races/dragonborn"
    },
    // ...更多数据
  ]
}

// interfaces.ts (推荐使用英文命名，并与API保持一致)
export interface IRaceList {
  count: number;
  results: IRace[]; // 修正：与API返回的 'results' 属性名一致
}

export interface IRace {
  index: string; // 修正：与API返回的 'index' 属性名一致，且类型为字符串
  name: string;
  url: string;
}

import React, { useState, useEffect } from 'react';
import { IRaceList, IRace } from './interfaces'; // 导入修正后的接口

const BASE_URL = "https://www.dnd5eapi.co/api/races";

const RaceList = () => {
  // 优化：为 raceList 状态提供一个初始值
  const [raceList, setRaceList] = useState<IRaceList>({
    count: 0,
    results: [] // 初始为一个空数组，确保 .map 方法在数据加载前不会出错
  });

  // ... (后续代码)
};

import React, { useState, useEffect } from 'react';
import { IRaceList, IRace } from './interfaces'; // 导入修正后的接口

const BASE_URL = "https://www.dnd5eapi.co/api/races";

const RaceList = () => {
  const [raceList, setRaceList] = useState<IRaceList>({
    count: 0,
    results: []
  });

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((results: IRaceList) => { // 明确指定 API 响应的类型
        setRaceList(results); // 直接设置整个 IRaceList 对象
      })
      .catch((error) => {
        console.error('Error fetching races:', error); // 优化错误信息
      });
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  return (
    <>
      {raceList.count > 0 ? ( // 根据 count 判断是否有数据，或者直接判断 results 数组长度
        raceList.results.map(({ index, name, url }) => ( // 访问 raceList.results，并使用 index 作为 key
          <div key={index}>
            <h3>{name}</h3>
            <p>URL: {url}</p>
          </div>
        ))
      ) : (
        <div>Loading races...</div> // 优化加载提示
      )}
    </>
  );
};

export default RaceList;

// interfaces.ts
export interface IRaceList {
  count: number;
  results: IRace[];
}

export interface IRace {
  index: string;
  name: string;
  url: string;
}

// RaceList.tsx
import React, { useState, useEffect } from 'react';
import { IRaceList, IRace } from './interfaces'; // 确保路径正确

const BASE_URL = "https://www.dnd5eapi.co/api/races";

const RaceList: React.FC = () => {
  const [raceList, setRaceList] = useState<IRaceList>({
    count: 0,
    results: []
  });

  useEffect(() => {
    const fetchRaces = async () => {
      try {
        const response = await fetch(BASE_URL);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data: IRaceList = await response.json();
        setRaceList(data);
      } catch (error) {
        console.error('Error fetching race data:', error);
        // 可以在这里设置错误状态，以便在UI中显示错误信息
      }
    };

    fetchRaces();
  }, []); // 仅在组件挂载时执行一次

  return (
    <div>
      <h2>D&D 5e Races</h2>
      {raceList.count > 0 ? (
        <ul>
          {raceList.results.map((race) => (
            <li key={race.index}>
              <strong>{race.name}</strong> (Index: {race.index}) - <a href={`https://www.dnd5eapi.co${race.url}`} target="_blank" rel="noopener noreferrer">Details</a>
            </li>
          ))}
        </ul>
      ) : (
        <p>Loading races or no data available...</p>
      )}
    </div>
  );
};

export default RaceList;