javascript - React.js : JSON request not rendering?

Question

代码:

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 类(class)并尝试使用 React 创建排行榜。遗憾的是，并非所有数据都会呈现，并且我在终端或 Chrome 开发工具控制台中没有出现任何错误。

问题:

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

没有用户出现:/

我做错了什么？

P.S.: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
    );
}