Question

我试图在组件安装状态（在cmoponentWillMount中）之前设置组件状态，该组件是从Firebase中提取的数据，但是却收到错误消息，提示“无法读取未定义的属性'setState'。如何正确设置状态，以便我的组件加载了正确的数据？

componentWillMount(){
  const rootRef = fire.database().ref('groups')
  rootRef.limitToFirst(1).once('value', function(snap) {
    snap.forEach(function(child){
      var first = (child.val()).id;
      console.log(first);
      this.setState({ selectedGroupId: first });
    })
  });
}

Answer 1

这是因为此的范围未定义。您需要使用ES6箭头功能来传递它。

componentWillMount(){
  const rootRef = fire.database().ref('groups')
  rootRef.limitToFirst(1).once('value', (snap) => {
    snap.forEach((child) => {
      var first = (child.val()).id;
      console.log(first);
      this.setState({ selectedGroupId: first });
    })
  });
}

尝试一下。

Answer 2

尝试一下。

永远不要在循环中使用setState，并且由于使用正则函数会出现该错误，因此将其更改为箭头函数，如下所示。还要切换到componentDidMount方法，因为不建议使用componentWillMount

  componentDidMount(){
      const rootRef = fire.database().ref('groups')
      rootRef.limitToFirst(1).once('value', snap => {
      let first = 0;
      snap.forEach(child => {
          first = (child.val()).id;
          console.log(first);
     })
     this.setState({ selectedGroupId: first });
     });
  }

或者如果您不想使用箭头功能，可以像这样绑定它

   componentDidMount(){
         const rootRef = fire.database().ref('groups')
         rootRef.limitToFirst(1).once('value', function(snap) {
              let first = 0;
              snap.forEach(function(child){
                    first = (child.val()).id;
                    console.log(first);
               }.bind(this));
             this.setState({ selectedGroupId: first });
            }.bind(this));
     }

开始使用let＆const代替var。

在使用Firebase数据挂载之前设置React组件的状态

2 个答案: