React.js：子组件未收到道具

Question

我正在尝试将状态变量作为道具传递给子组件，但是子组件没有收到任何东西。 我在某处看到状态变量不会立即更新，因此我将将两个子组件交换到setState回调函数中的调用移动了。 这是一些代码..

父组件

//function called by app component to unmount from parent
handleLandingUnmount(enteredCode){
    console.log(enteredCode + ' received in index.js');
    //updating state to give enteredCode to be passed to Chatpage component in props
    this.setState({sessionCode: enteredCode}, function(){
        this.onSessionInState();
    });
}

onSessionInState(){
    console.log(this.state.sessionCode);
    this.setState({renderLandingScreen:false});
    this.setState({renderChatScreen:true});
}

render(){
    //if app component has unmounted, check if chat screen is to be rendered and pass the code as a prop
    const toRender = this.state.renderLandingScreen?<App unmount={this.handleLandingUnmount}/>:
                    this.state.renderChatScreen?<Chatpage sessionCode={this.state.enteredCode}/>:<h1>Something else could go here...</h1>;
    return toRender;
}

聊天页面组件

constructor(props){
    super(props);
    console.log(JSON.stringify(props));
}

render(){ 
    return(
    <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>{this.props.sessionCode}</h2>
        </div>
    </div>
    );
}

在此先感谢您的帮助。

Answer 1

看起来当代码存储在this.state.sessionCode中时，您正在传递this.state.enteredCode

Answer 2

应该是this.state.sessionCode。 您正在传递this.state.enteredCode