javascript - ReactJS 将子状态解析为父状态

Question

我想解析从 child 到 parent 的数据，我已经尝试了问题的解决方案

How to parse data from child to parent using reactjs?

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

我尝试实现此功能以根据单击的菜单显示内容例子:我有 3 个菜单- A-B-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)}/>

child

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
}