Javascript 组件不再呈现后运行的函数（React）

首先，我要说我是一个新的反应者

当通过从菜单组件提升状态在菜单组件中单击按钮时，我尝试在主菜单组件和大厅组件之间切换（如下所示）：

从“React”导入React；
从“./Menu.js”导入菜单页
类GamePage扩展了React.Component{
构造函数（）{
超级（）
此.state={
inLobby:错误
}
this.setInLobby=this.setInLobby.bind（this）
this.onBackClick=this.onBackClick.bind（this）
}
onBackClick（）{
this.setState（{inLobby:false}）
}
setInLobby（状态）{
这是我的国家({
inLobby:状态
});
}
render（）{
返回(
{this.state.inLobby===true&&
(
你好（世界）}
{this.state.inLobby===false&&（）}
)
}
}
导出默认游戏页面；

我的菜单屏幕

我的菜单页的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import LobbyBanner from './Banner.js';
import MenuButton from "./Buttons.js";
import firebase from "./firebase.js";

class MenuPage extends React.Component {
constructor(props){
    console.log(props);
    super();
    this.state = {
        Name: "Sebastian",
        Game_Key: "",
    }
    this.setName = this.setName.bind(this)
    this.setLobby = this.setLobby.bind(this)
    this.createLobby = this.createLobby.bind(this)
}

setName(){
    this.setState({
        Name: document.querySelector("#name").value,
        Game_Key: this.state.Game_Key,
    })
}

setLobby() {
    var lobby = document.querySelector("#game_input").value
    this.setState({
        Name: this.state.Name,
        Game_Key: document.querySelector("#game_input").value,
    })
    var firestore = firebase.firestore();  
    var docRef = firestore.doc("Games/Game " + document.querySelector("#game_input").value);
    docRef.get()
    .then((docSnapshot) => {
      if ((docSnapshot.exists)){
            docRef.onSnapshot((doc) => {
                docRef.update({
                    players : firebase.firestore.FieldValue.arrayUnion(document.querySelector("#name").value)
                }) 
            });
            this.props.setInLobby(true);
        } 
      else {
        this.setState({
            Name: this.state.Name,
            Game_Key: "Not found",
        })
        return;
      }
  });
}

createLobby() {
    var random_num = Math.floor(Math.random() * 1000000);
    this.setState({
        Name: this.state.Name,
        Game_Key: random_num,
    })
    var firestore = firebase.firestore();  
    var docRef = firestore.doc("Games/Game " + random_num);
    docRef.set({
        PlayerAmnt: 1
    })
    docRef.update({
        players : firebase.firestore.FieldValue.arrayUnion(this.state.Name)
    })
}


render(){
    return (
        <div>
            <div style={{display: "flex", justifyContent: "center"}}>
            <h1>{this.state.Name}</h1>
            </div>
            <div style={{display: "flex", justifyContent: "center"}}>
            <h1>Lobby: {this.state.Game_Key}</h1>
            </div>
            <br/>
            <div style={{display: "flex", justifyContent: "center"}}>
                <input type="textfield" id="name"></input>
                <MenuButton 
                    style={{fontSize: "30px"}} 
                    text="Name" 
                    onClick={this.setName}
                />
            </div>
            <br/>
            <div style={{display: "flex", justifyContent: "center"}}>
                <input type="textfield" id="game_input"></input>
                <MenuButton 
                    style={{fontSize: "30px"}} 
                    text="Join game"
                    onClick={this.setLobby}
                />
                <MenuButton 
                    style={{fontSize: "30px"}} 
                    text="Host Game"
                    onClick={this.createLobby}
                />
            </div>
        </div>
    )

    }
}

export default MenuPage;

从“React”导入React；
从“react dom”导入react dom；
从“/Banner.js”导入LobbyBanner；
从“/Buttons.js”导入菜单按钮；
从“/firebase.js”导入firebase；
类MenuPage扩展了React.Component{
建造师（道具）{
控制台日志（道具）；
超级（）；
此.state={
姓名：“塞巴斯蒂安”，
游戏密钥：“，
}
this.setName=this.setName.bind（this）
this.setlobb=this.setlobb.bind（this）
this.createLobble=this.createLobble.bind（this）
}
setName（）{
这是我的国家({
名称：document.querySelector（“#Name”）.value，
游戏密钥：这个。状态。游戏密钥，
})
}
setlobble（）{
var lobb=document.querySelector（“#游戏输入”）.value
这是我的国家({
名称：this.state.Name，
Game_Key:document.querySelector（“#Game_input”）.value，
})
var firestore=firebase.firestore（）；
var docRef=firestore.doc（“游戏/游戏”+document.querySelector（“游戏输入”）.value）；
docRef.get（）
。然后（（docSnapshot）=>{
如果（（docSnapshot.exists））{
docRef.onSnapshot（（doc）=>{
docRef.update({
玩家：firebase.firestore.FieldValue.arrayUnion（document.querySelector（“#name”）.value）
}) 
});
this.props.setInLobby（true）；
} 
否则{
这是我的国家({
名称：this.state.Name，
游戏密钥：“未找到”，
})
返回；
}
});
}
CreateLobble（）{
var random_num=Math.floor（Math.random（）*1000000）；
这是我的国家({
名称：this.state.Name，
游戏键：随机数，
})
var firestore=firebase.firestore（）；
var docRef=firestore.doc（“游戏/游戏”+随机数）；
docRef.set({
播放时间：1
})
docRef.update({
玩家：firebase.firestore.FieldValue.arrayUnion（this.state.Name）
})
}
render（）{
返回(
{this.state.Name}
大厅：{this.state.Game_Key}




)
}
}
导出默认菜单页；

我的问题：我正在使用firebase为一个简单的游戏创建大厅。基本上，连接代码输入用于查找大厅，如果找到大厅，主菜单屏幕将不再呈现，游戏页面状态将更新为“Hello word”按钮，我的代码是（包括在上面）：

理论上，我的代码应该将菜单屏幕的状态设置为新的游戏键，检查键是否有效，执行必要的操作，然后更改GamePage的状态以呈现按钮，这意味着MenuPage方法不再运行，对吗？还是我遗漏了什么？因为我得到了以下错误： 我猜它正在尝试读取不再呈现的文本输入，但为什么即使组件不再呈现，该函数仍被调用？我试着用一个简单的if（document.querySelector（“#name”））来避免这个不存在的语句，但它只会导致更多的错误，所以我想我应该正确地解决它。我甚至不确定我应该怎么做，因为这似乎是对react如何工作的基本误解。有人能提供一些见解吗

编辑：这是我的index.js，它实际呈现组件

import React from 'react';
import ReactDOM from 'react-dom';
import MenuPage from './Menu.js'
import firebase from "./firebase.js";
import Lobbylist from "./lobbylist.js";
import GamePage from "./Gamepage.js";

ReactDOM.render(<GamePage/>, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“./Menu.js”导入菜单页
从“/firebase.js”导入firebase；
从“/Lobbylist.js”导入Lobbylist；
从“/GamePage.js”导入游戏页面；
ReactDOM.render（，document.getElementById（'root'））；

您可以使用

？

检查它是否为空

document.querySelector（#name”）？值

您可能希望在呈现组件之后执行所有查询元素的操作，以确保您查询的元素已经存在

您可以使用

componentDidMount

添加要在渲染后运行的代码

componentDidMount() {
     document.querySelector("#name").?value
}

componentDidMount() {
     document.querySelector("#name").?value
}