从 Axios GET 请求访问数据

Question

我无法通过 Axios GET 请求访问数据。我希望能够遍历我获得的所有数据并创建一个 table 来显示每个用户的用户名、头像和分数。我目前能够呈现单个用户名的唯一方法是使用以下代码：

  this.setState({name: res.data[0].username});

但是上面的代码只允许我访问我在 GET 请求中使用的 URL 中的第一个对象。如果我使用此代码：

this.setState({name: JSON.stringify(res.data)});

我能够将整个对象呈现为字符串。所以这让我觉得我需要更新我的渲染方法，但我不确定如何。

我应该采取什么步骤才能映射我正在设置的状态并在 table 或列表中呈现每个用户的数据？

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"));

Answer 1

您走在正确的轨道上，只是缺少一些关键部分。

第 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>
      )
     } 
}

这就是说 "Go through that data and give me the name of each person and wrap it in some <h1> tags and spit that out"。

从 Axios GET 请求访问数据

Accessing data from Axios GET request

javascript

reactjs

axios