对象的.map方法不起作用，我无法与我导入的API的对象进行交互。在浏览器的控制台上我读取了该对象。
这是一个组件 razze("races")
1
500const 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
}
能够进入对象
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
您收到的数据与您在界面中期望的数据不同。观察 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> )} </> ); };