无法使用Firebase数据库侦听器设置State()

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(数据(时，我确实看到数据包含了我想要的所有信息。然而，this.setState不起作用，这导致页面无法呈现，因为render((中使用了来自state的大量信息。即使我将空间设置为"；你好"；，如代码片段的最后一条语句所示，它仍然无法设置状态。我想知道这是否是因为在成功检索数据之前调用了render((？如果是，我该如何解决？提前谢谢。

Answer 1

我认为您需要componentDidMount((。

正如React官方文件所说：

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

此外，不要忘记结束componentWillUnmount((上的订阅