你能在反应组件内的构造函数对象中使用这个.setState吗?

Question

我希望这个 Firebase on value 事件侦听器始终在此组件内运行，侦听数据库中的更改，然后更新状态。我正在查看示例，我只发现我可以在构造函数对象中添加这个特定的 firebase 事件侦听器。但是，当我设置状态时，我收到这样的错误null is not an object(evaluating this.setState).关于如何解决这个问题的任何想法？

构造函数(道具( {

    super(props);
    this.props = props;
    this.actions = commentActions;
    this.state = {
      comments: [],
      loadingComments: true,
      lastCommentUpdate: null,
      review: props.review ? props.review : null,
      login: null,
      id: props.id
    };
    this.scrollIndex = 0;

    database.ref("comments/").on("value", function(snapshot) {
      console.log('DATA: ', typeof snapshot)
      // console.log(this.state.comments )
      this.setState({
        comments:[...this.state.comments, snapshot]
      })
    })
  }

Answer 1

我认为你的问题就在这里：

database.ref("comments/").on("value", function(snapshot) {
  console.log('DATA: ', typeof snapshot)
  // console.log(this.state.comments )
  this.setState({
    comments:[...this.state.comments, snapshot]
  })
})

this

bit： function(snapshot( ，将"this"上下文绑定到调用方，即".on"(猜测(。所以，我们必须删除它。确保在构造函数的上下文中调用"this"，方法是将其更改为匿名函数，该函数没有自己的"this"上下文。因此，"这个"是从周围的物体中获得的。

更改为：这允许父对象拥有"this"上下文。

database.ref("comments/").on("value",(snapshot) => {
  console.log('DATA: ', typeof snapshot)
  console.log(this.state.comments )
  this.setState({
    comments:[...this.state.comments, snapshot]
  })
})

如果这个 dooesn 不起作用，那么我假设在构造函数调用的范围内还没有定义"this"，所以你可能会有更好的运气把它放在"ComponentDidMount"生命周期方法中。

Answer 2

您可以在

构造函数中使用setState，如果在当前执行堆栈结束后调用它，就像数据库调用一样，它将触发重新呈现。所以是的，如果不是因为其他错误，你的方法会起作用。但是，我建议在 React.Component 文档中的组件的 componentDidMount 方法中进行数据获取。

组件挂载后立即调用 componentDidMount((。需要 DOM 节点的初始化应该转到此处。如果需要从远程终结点加载数据，这是实例化网络请求的好地方。