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

---

SITUATION：

私はFreeCodeCampカリキュラム次して反応してリーダーボードを作成しようとしています。残念ながら、すべてのデータがレンダリングされるわけではなく、端末やChrome開発ツールのコンソールにエラーはありません。

問題：

これは私の画面上に描画するものである：

んが、ユーザーは表示されません：/

は私が間違って何をしましたか？

P .:新しい学習を開始しました。

Answer 1

this.setState({ users: data })を使用してユーザーデータでコンポーネントの状態を設定しているのに、usersキーで状態オブジェクトを定義していないため、LeaderBoardコンポーネントを更新する必要があります。あなたはこのようにそれを行うことができます。

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