尝试使用 componentDidMount 中的函数设置新状态：this.setState 不是函数

Question

我有一个名为 fetchUsers 的 setTimout 函数，它会在 5 秒后返回用户。我试图在 componentDidMount 中调用 fetchUsers 来更新用户状态。我得到的错误是 this.setState 不是函数。如何正确更新componentDidMount函数中的用户状态？

var App = React.createClass({

  fetchUsers: function(cb){
    setTimeout(function(){
       cb([{name: 'joe'}, {name: 'john'}, {name: 'jim'}])
    }, 1000)
  },

  getInitialState: function(){
    return {
      users: [],
      loaded: false,
    }
  },

  componentDidMount: function(){
    this.fetchUsers(function(users){
      console.log(users);
      this.setState({
        users: users,
        loaded: true
      })
    })
  },

  render: function(){
    if(!this.state.loaded){
      return (
        <div>
          <p> Loading.... </p>
        </div>
        )
    };
    var users = this.state.data.map(function(user){
        return <li> {user.name} </li>
    });

    return(
        <div>
          <h3> Look at my users.. </h3>
          <ul> {users} </ul>
        </div>
      )
  }

})

React.render(<App/>, document.getElementById('hello'))

Answer 1

您对此的引用有所不同。以下应该有效：

componentDidMount: function(){
    this.fetchUsers(function(users){
      console.log(users);
      this.setState({
        users: users,
        loaded: true
      })
    }.bind(this))
}