我无法从Axios GET请求访问数据。我希望能够遍历我获得的所有数据,并创建一个表格,显示每个用户的用户名,头像和分数。我目前能够呈现单个用户名的唯一方法是使用以下代码:
this.setState({name: res.data[0].username});
但是上面的代码只允许我访问我在GET请求中使用的URL中的第一个对象。如果我使用此代码:
this.setState({name: JSON.stringify(res.data)});
我能够将整个对象渲染为字符串。所以这让我觉得我需要更新我的渲染方法,但我不确定如何。
我应该采取哪些步骤,以便映射我在表格或列表中设置和呈现每个用户数据的状态?
class LeaderBoard extends React.Component {
constructor(props) {
super(props)
this.state = {
name: []
}
}
componentDidMount(){
axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent').then(res =>
{
this.setState({name: res.data[0].username});
});
}
render () {
return (
<div>
<h1>{this.state.name}</h1>
</div>
)
}
}
ReactDOM.render(
<LeaderBoard/>, document.getElementById("app"));
答案 0 :(得分:2)
你走在正确的轨道上,你只是错过了一些关键部分。
第1步:将整个数组添加到您的状态
我不确定您数据的确切结构,但您可能想要这样做
componentDidMount(){
axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent').then(res =>
{
this.setState({data: res.data});
});
}
现在,您已拥有要在州内使用的所有数据,可以进行迭代。
第2步:使用.map()
创建所需的JSX元素
这段代码:
render () {
return (
<div>
<h1>{this.state.name}</h1>
</div>
)
}
}
这里最大的缺点是它只会呈现一个的东西,因为,那就是所有的东西。您想要做的是.map()
通过并从您的数据中创建一堆名称,对吗?
这看起来更像是这样。
render () {
const namesToRender = this.state.data.map(val => {
return (
<h1>val.username</h1>
)
})
return (
<div>
{namesToRender}
</div>
)
}
}
所有这一切都说是&#34;浏览这些数据并给我每个人的名字并将其包装在一些<h1>
标签中并吐出来#34;。