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