React.js：JSON请求不呈现？

Question

CODE：

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课程，并努力与反应的排行榜。可悲的是，并非所有的数据呈现，我在终端或Chrome开发工具控制台没有错误。

问题：

这是我的屏幕上呈现什么：

没有用户出现：/

我做了什么错？

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