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”上下文绑定到调用者，即“.on”（猜测）。所以，我们必须删除它。确保在构造函数的上下文中调用“this”，方法是将其更改为匿名函数，该函数没有自己的“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]
  })
})

如果这不起作用，那么我认为“this”尚未定义，在构造函数调用的范围内，所以你可能会更好地将它放在“ComponentDidMount”生命周期方法中。

Answer 2

您可以在构造函数中使用setState，如果在当前执行堆栈结束后调用它，就像使用数据库调用一样，它将触发重新渲染。所以是的，如果不是其他错误，你的方法会起作用。不过，我建议您在React.Component documentation中选择的componentDidMount方法中进行数据提取。

装载组件后立即调用
componentDidMount（）。需要DOM节点的初始化应该放在这里。如果需要从远程端点加载数据，这是实例化网络请求的好地方。

你能在react组件里面的构造函数对象中使用this.setState吗？

2 个答案: