Question

我的代码生成以下错误：未捕获TypeError：this.state.value.map不是函数。它似乎正在检索AJAX数据，但不会使用JavaScript map函数迭代状态。有什么想法会出错吗？

var LeaderBoardContainer = React.createClass({
  getInitialState: function() {
    return { value: [] }
  },

  componentDidMount: function() {
    var sortedByRecent = $.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent', function(data) {
    this.setState({ value: sortedByRecent })
    console.log(this.state)
    }.bind(this));
  },                                         

  render: function() {
    var rows = this.state.value.map(function(user){
      return (
        <tr>
          <td></td>
          <td>{user.username}</td>
          <td>{user.recent}</td>
          <td>{user.alltime}</td>
        </tr>
      )
    })
    console.log(rows)
    return (
      <table>
        <thead>
          <tr>
            <th>a</th>
            <th>b</th>
            <th>c</th>
            <th>d</th>
          </tr>
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    )
  }
});

React.render(<LeaderBoardContainer />, document.getElementById('container'))

Answer 1

您正在以错误的方式使用$.get方法。它本身并不会带来价值。在AJAX请求完成后，您需要传递一个回调函数，它将调用并传递数据。像这样：

componentDidMount: function() {
    $.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent', function(data){
       this.setState({ value: data })
    }.bind(this));
  }

Answer 2

My code

我使用setTimeout来模拟ajax。

componentDidMount: function() {
    setTimeout(()=>
    this.setState({value: [{username: 'sam', recent: 1, alltime: 2}]}), 3000);
},

似乎没有发生错误。
也许检查ajax api响应。

未捕获的TypeError：使用React映射时this.state.value.map不是函数

2 个答案: