React setState 不起作用，出现错误答案

【问题标题】：React setState not working, getting errorReact setState 不起作用，出现错误
【发布时间】：2017-01-25 15:51:54
【问题描述】：

尝试使用 setState 时出现以下错误：

Uncaught TypeError: Cannot read property 'setState' of null

我不知道我哪里错了，请有人指出我正确的方向。这是我的代码：

export default React.createClass({
    getInitialState: function () {
      return {
        name: '',
        address: '',
        phone: '',
        email: '',
     }
   },

  componentWillMount(){
    this.getUserDetails();
  },

  getUserDetails: function(){
    var personID = 'ABC123'; 
    if(personID.length > 0){
      new Firebase('https://xxxxxxxxxx.firebaseio.com/users/' + personID).on('value', function(snap) {

        this.setState({
          name: snap.val().Name + " " +snap.val().Surname
        });

      });
     }
  },
  render() {
    return ( ... );
  }
});

【问题讨论】：

您需要将 this 绑定到 Firebase 回调，或者改用 箭头函数。 .on('value', function(snap) { ... }.bind(this)
或使用依赖于词法作用域的arrow functions

标签： java reactjs react-native setstate

【解决方案1】：

就像人们在上面所说的那样，如果您只是将其编辑为箭头函数，它会将 this 的上下文从 Firebase 更改为外部范围 - 即组件。

  new Firebase('https://xxxxxxxxxx.firebaseio.com/users/' + personID).on('value', (snap) => {

    this.setState({
      name: snap.val().Name + " " +snap.val().Surname
    });

  });

【讨论】：

【解决方案2】：

发生这种情况是因为 this 的上下文不再是组件。你需要这个组件。检查我是如何抓取组件的。

export default React.createClass({
    getInitialState: function () {
      return {
        name: '',
        address: '',
        phone: '',
        email: '',
     }
   },

  componentWillMount(){
    this.getUserDetails();
  },

  getUserDetails: function(){
    var that  = this
    var personID = 'ABC123'; 
    if(personID.length > 0){
      new Firebase('https://xxxxxxxxxx.firebaseio.com/users/' + personID).on('value', function(snap) {

        that.setState({
          name: snap.val().Name + " " +snap.val().Surname
        });

      });
     }
  },
  render() {
    return ( ... );
  }
});

【讨论】：