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

问题：

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

没有用户出现：/

我做错了什么？

P.S。：React的新手，开始学习。

Answer 1

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

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

  ...other code
});

第二件事是，在render方法中，你需要从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
    );
}

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

1 个答案: