reactjs将子状态解析为父状态

Question

我想解析从孩子到父母的数据我已经尝试了问题的解决方案

How to parse data from child to parent using reactjs?

我打印那个状态，显示的是前一个动作的状态，而不是最后一个动作的状态

我尝试实现此功能以根据单击的菜单显示内容 例子： 我有 3 个菜单 - 一种 -乙 - C

当我第一次点击菜单时，例如A。控制台中的状态是''，然后我第二次点击B，控制台中的状态是A

这是我的代码

家长

changeMenu= (menu) =>{
    this.setState({
        menu: menu
    });
    console.log('menu',menu);  // Show State
}

render(){
    return (
        <LeftMenuMycommission active="0" menu = {(value) => this.changeMenu(value)}/>

儿童

menuClick = (menu_name, active) =>{
    this.setState({
        menu: menu_name,
    })
    this.props.menu(this.state.menu); 

}

render (){
    render (
        <ul>
            <li ><a onClick={this.menuClick.bind(this, "A")}><i className={"fa fa-circle"}></i> A</a></li>
            <li ><a onClick={this.menuClick.bind(this, "B")}><i className={"fa fa-circle"}></i> B</a></li>
            <li ><a onClick={this.menuClick.bind(this, "C")}><i className={"fa fa-circle"}></i> C</a></li>
        </ul>

谁能帮我找出问题所在？

任何帮助将不胜感激谢谢:)

Answer 1

It's not guaranteed that state is updated immediately. 您需要使用回调函数，然后调用您的父方法将子组件状态正确传递给父：

menuClick = (menu_name, active) =>{
    this.setState({
        menu: menu_name,
    }, () => {
     this.props.menu(this.state.menu); 
    })
}

或者，componentDidUpdate 也会做同样的工作：

componentDidUpdate() {
  this.props.menu(this.state.menu) // only called after component is updated
}