Question

class Dashboard extends React.Component{

    constructor(props){
        super(props);
        this.state = {navigation : ''}
    }

    render(){
        return(
            <div className="wrapper">
                  <Navigation onNavigationChange={this.onNavigationChange.bind(this)}/>
                  <main>
                      <TopBar navigation={this.state.navigation}/>
                      <div className="content">
                        <MiddleBar/>
                        {this.props.children}
                      </div>
                      <Footer />
                  </main>
            </div>
        );
    }

    onNavigationChange(selectedValue){
        this.setState({navigation : 'selectedValue'});
        debugger;
    }
}

export default Dashboard;

我正在将onNigationNhaigationChange回调传递给我的导航内容。它被调用并返回所选状态的值。但是当我尝试setState时，this.setState（{navigation：selectedValue}）状态没有得到更新。

Answer 1

this.setState({navigation : 'selectedValue'});不直接改变状态。来自React doc：

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

因此，当调用debugger;时，this.state尚未更改

Answer 2

onNavigationChange（了selectedValue）{ 执行console.log（了selectedValue） //如果将this.setState中的//拼写错误更正为this.setState（{navigation：selectedValue}），请记录selectedValue; this.setState（{navigation：＆＃39; selectedValue＆＃39;}）; 调试器; }

Answer 3

Damien Leroux是对的。您不能指望在同一事件循环中立即看到状态更改。将debugger放在render方法中，看看状态更改是否触发了重新渲染

注意到下面的这一行

this.setState({navigation : 'selectedValue'});

看起来您正在使用硬编码字符串'selectedValue'更新导航状态，而不是实际值selectedValue

setState没有更新状态

3 个答案: