对象的.map方法不起作用,我无法与我导入的API的对象进行交互。在浏览器的控制台上我读取了该对象。
这是一个组件 razze("races")
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('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 }
能够进入对象
P粉1279012792024-04-03 12:07:48
您收到的数据与您在界面中期望的数据不同。观察 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> )} </> ); };