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"         },         // …… 其他种族数据     ] }

文心大模型

百度飞桨 - 文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

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