解决React中map方法失效：API数据结构与状态管理深度解析

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

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

export interface IRace {
  index: string; // 修正为 'index'，且通常为字符串类型
  name: string;
  url: string;
}

import React, { useState, useEffect } from 'react';

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

// 使用修正后的接口
interface IRaceList {
  count: number;
  results: IRace[];
}

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

const RaceList = () => {
  // 初始化raceList状态为一个符合IRaceList接口的空对象
  const [raceList, setRaceList] = useState<IRaceList>({
    count: 0,
    results: [] // 确保results数组在初始时是空的，而不是undefined
  });

  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((results: IRaceList) => { // 类型断言确保results符合IRaceList
        setRaceList(results);
      })
      .catch((error) => {
        console.error('Error fetching races:', error);
      });
  }, []); // 空依赖数组确保只在组件挂载时运行一次

  // ... 渲染逻辑
};

export default RaceList;

// ... (组件代码省略)

  return (
    <>
      {/* 检查count属性是否大于0，或者直接检查results数组的长度 */}
      {raceList.count > 0 ? ( // 或者 raceList.results.length > 0
        raceList.results.map(({ index, name, url }) => (
          // 使用修正后的'index'作为key
          <div key={index}>
            {name} - <a href={`https://www.dnd5eapi.co${url}`} target="_blank" rel="noopener noreferrer">{url}</a>
          </div>
        ))
      ) : (
        <div>加载中...</div> // 数据加载时的友好提示
      )}
    </>
  );
};

export default RaceList;

import React, { useState, useEffect } from 'react';

// API基础URL
const BASE_URL = "https://www.dnd5eapi.co/api/races";

// 修正后的接口定义，与API响应结构完全匹配
export interface IRaceList {
  count: number;
  results: IRace[];
}

export interface IRace {
  index: string; // 注意：API返回的index是字符串
  name: string;
  url: string;
}

const RaceList = () => {
  // 初始化状态，确保results数组始终存在且为数组类型
  const [raceList, setRaceList] = useState<IRaceList>({
    count: 0,
    results: []
  });

  // 使用useEffect进行数据获取
  useEffect(() => {
    fetch(BASE_URL)
      .then((res) => res.json())
      .then((data: IRaceList) => { // 明确指定接收到的数据类型
        setRaceList(data);
      })
      .catch((error) => {
        console.error('Error fetching race data:', error);
        // 可以在这里设置错误状态，并在UI中显示错误信息
      });
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div>
      <h2>D&D 5e 种族列表</h2>
      {/* 优化条件渲染：当results数组有数据时才进行map操作 */}
      {raceList.results.length > 0 ? (
        raceList.results.map(({ index, name, url }) => (
          // 使用API返回的'index'作为key，确保唯一性
          <div key={index} style={{ marginBottom: '8px', padding: '10px', border: '1px solid #eee', borderRadius: '4px' }}>
            <strong>{name}</strong> - <a href={`https://www.dnd5eapi.co${url}`} target="_blank" rel="noopener noreferrer">详情</a>
          </div>
        ))
      ) : (
        // 数据加载中或无数据时的提示
        <p>加载中...</p>
      )}
    </div>
  );
};

export default RaceList;