reactjs - 无法使用 Firebase 数据库侦听器 setState()

Question

我正在尝试构建一个带有房间的迷你游戏。当我尝试从我的 firebase 实时数据库中检索房间信息时，我使用 database.ref().on() 函数来监听任何数据更改并根据更改设置我的状态。代码如下所示：

export default class Room extends Component {
  state = {
    room: null,
    username: "sdff",
  };

  componentWillMount() {
    const roomId = this.props.location.pathname;
    app()
      .database()
      .ref(`/rooms${roomId}`)
      .on("value", (snapshot) => {
        const data = snapshot.val();
        console.log(data);
        this.setState({ room: data });
        this.setState({ room: "hello" });
      });
  }

当我执行 console.log(data) 时，我确实看到数据包含我想要的所有信息。但是，this.setState 不起作用，这会导致页面无法呈现，因为在 render() 中使用了来自 state 的大量信息。即使我将房间设置为“hello”，如代码片段的最后一条语句所示，它仍然无法设置状态。我想知道是否是因为在成功检索数据之前调用了 render() ？如果是这样，我该如何解决这个问题？提前致谢。

标签： reactjsfirebasefirebase-realtime-database

Answer 1

我认为您需要componentDidMount()代替。

正如 React 官方文档所说：

此方法是设置任何订阅的好地方

另外，不要忘记在componentWillUnmount()上结束订阅