如何显示返回对象而不是数组的api调用中的数据

Question

http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json

这是我尝试使用的api。出于某种原因，当我去映射它以从中提取数据并显示它所支持的数据时。map不是一个函数。(我猜它这么说是因为我无法使用.map迭代对象。所以我尝试使用object.keys(冠军(，但我仍然无法真正让它做我想做的事情。

我觉得我错过了一些非常简单的东西，因为我已经有很长一段时间没有调用任何api了。

这是我的密码。

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ChampionContainer from "./ChampionContainer";
// import { Link } from 'react-router-dom';

const ChampionList = () => {
const [ champions, setChampions ] = useState([])
console.log("This is our state",champions)
useEffect(() => {
const url = "http://ddragon.leagueoflegends.com/cdn/10.16.1/data/en_US/champion.json";
axios.get(url)
.then(response => {
setChampions(response.data.data);
})
.catch(error => {
console.log("server Error", error)
})
}, [champions]);


return (
// Object.keys(a).map(function(keyName, keyIndex) {
//     // use keyName to get current key's name
//     // and a[keyName] to get its value
//   })
<div>
{Object.keys(champions).map((key) => {
return (<div key={key}>{champions[key]}</div>)
})}
{/* {champions.map((champion) => (
<ChampionContainer key={champion.id} champion={champion}/>
))} */}
</div>
);
}

export default ChampionList;

提前感谢您的帮助。

Answer 1

你是对的，你第一次尝试在champions上执行.map()是行不通的，因为它不是数组，而是对象。

你的第二次尝试更近了，尽管当你这样做的时候-

champions[key]

这将返回一个champion对象。你只需要从该对象访问你想要的属性，例如

champions[key].name-获取champion的名称，例如Aatrox

Answer 2

那里有一个无限循环。在useEffect中，将冠军作为一个参数传递，当它改变时，你会非常喜欢useEffect，但在那里你设置了冠军，然后冠军改变了，useEffect再次运行。结果是无限循环。

您调试程序以确保respomse.data.data具有所需的信息？

在setChampions函数中，最好使用setChampion(current=>current+newData(；这是一个对象，所以应该使用spread操作符映射到一个新对象上。