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 ListaRazze = () => {
  const [razze, setRazze] = useState<RazzeArray>(); // 状态可能为 undefined

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((results) => {
        setRazze(results); // 假设 results 的结构与 RazzeArray 匹配
      });
  }, []);

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

{
    "count": 5,
    "results": [ // 实际属性名是 'results'
        {
            "index": "dragonborn", // 实际属性名是 'index'
            "name": "Dragonborn",
            "url": "/api/races/dragonborn"
        },
        // ... 其他种族数据
    ]
}

// models.ts (修正后的接口定义)
export interface IRaceList {
  count: number;
  results: IRace[]; // 修正为 'results'
}

export interface IRace {
  index: string; // 修正为 'index' (类型可能为 string)
  name: string;
  url: string;
}

// ListaRazze.tsx (修正后的组件代码片段)
const RaceList = () => {
  // 为状态提供一个包含空数组的初始值，确保 raceList.results 始终存在
  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 fetching races:', error); // 更好的错误日志
      });
  }, []); // 依赖项数组为空，表示只在组件挂载时运行一次

  return (
    <>
      {/* 使用 raceList.count 来判断是否有数据，或者直接检查 raceList.results.length */}
      {raceList.count > 0 ? (
        raceList.results.map(({ index, name, url }) => (
          <div key={index}>{name} {url}</div>
        ))
      ) : (
        <div>Loading...</div>
      )}
    </>
  );
};

export default RaceList;

// models.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 './models'; // 假设 models.ts 在同级目录

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

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

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => {
        if (!res.ok) {
          throw new Error(`HTTP error! status: ${res.status}`);
        }
        return res.json();
      })
      .then((data: IRaceList) => {
        setRaceList(data);
      })
      .catch((error) => {
        console.error('Error fetching race data:', error);
        // 可以在这里设置一个错误状态，并在UI中显示错误信息
      });
  }, []);

  return (
    <div>
      <h1>D&D 5e 种族列表</h1>
      {raceList.count > 0 ? (
        <ul>
          {raceList.results.map((race: IRace) => (
            <li key={race.index}>
              {race.name} (<a href={`https://www.dnd5eapi.co${race.url}`} target="_blank" rel="noopener noreferrer">详情</a>)
            </li>
          ))}
        </ul>
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
};

export default RaceList;