为什么this.setState不在这里工作？

Question

snapshot.forEach(function(childSnapshot) {
  groupRef.child(childSnapshot.key).once("value", (snap) => {
    this.setState.bind({
      expenses: this.state.expenses.concat(snap.val()),
    });
  })
})

我得到的错误是

undefined is not an object (evaluating '_this2.setState')

国家已按以下方式宣布

constructor(props) {
  super (props);
  this.state = {
    expenses: [],
  };
}

Answer 1

这是因为您没有正确地调用或使用绑定,并且this您在通过使用传统函数回调调用forEach创建的上下文中引用了哪些不同.bind的第一个参数是上下文而不是参数.

在这种情况下,请避开它​​并使用箭头功能,因此this仍然是您的组件参考.

snapshot.forEach((childSnapshot) => {
  groupRef.child(childSnapshot.key).once("value", snap =>
    this.setState(state => ({ expenses: [ ...state.expenses, snap.val()] }))
  );
});

请注意,在引用现有状态时,应该使用上面的setState的回调样式,因为setState在设置状态时是异步的,它可能已经更改,尤其是在异步回调中设置循环时.