Question

React.js：JSON 请求无法呈现？

2017-04-16

132

javascript reactjs

代码：

var React = require('react');
var User = require('./User.jsx');

var LeaderBoard = React.createClass({

    users: [],

    componentDidMount: function () {    
      var url = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime'
      var that = this;

      fetch(url)
      .then(function(response) {
        if (response.status >= 400) {
          throw new Error("Bad response from server");
        }
        return response.json();
      })
      .then(function(data) {
        that.setState({ users: data });
      });
    },

    render: function() {

        var usersLeaderboard = this.users.map(function(item) {
            return <User key={item.id} img={item.img} username={item.username} recent={item.recent} alltime={item.alltime} />;
        });

        return (
            <table>
                <tbody>
                    <tr>
                        <th>Avatar</th>
                        <th>Username</th> 
                        <th>30 Days</th>
                        <th>All Time</th>
                    </tr>
                    {usersLeaderboard}
                </tbody>
            </table>
        );
    } 
});

情况：

我正在学习 FreeCodeCamp 课程，并尝试使用 React 创建排行榜。遗憾的是，并非所有数据都能呈现，而且我在终端或 Chrome 开发工具控制台中没有遇到任何错误。

问题：

这是我的屏幕上呈现的内容：

没有出现用户 :/

我做错了什么？

附注：刚接触 React，刚刚开始学习。

Answer 1

您需要更新 LeaderBoard 组件，因为您使用 this.setState({ users: data }) 来设置包含用户数据的组件状态，但您没有使用 users 键定义状态对象。您可以这样做：

var LeaderBoard = React.createClass({
  getInitialState: function () {
   return {
     users: [],
   };
  },

  ...other code
});

第二件事是，在渲染方法中，您需要从 state 对象中获取用户，如下所示：

render: function() {
  var usersLeaderboard = this.state.users.map(function(item) {
      return <User key={item.id} img={item.img} username={item.username} recent={item.recent} alltime={item.alltime} />;
    });

    return (
     ...other code
    );
}