Javascript 对don'作出反应；在第一个方法触发后不改变状态

在我的React应用程序中，我有组件结构： -等位基因 --单元素 --单元素详细信息

我正在将方法

See

传递到

SingleElement

组件，我在其中调用

seefunc

从

allegements

组件调用See方法。

allegements

中的问题我的状态（名称）在第一次单击触发器后不会改变，在第二次单击后会改变。你能告诉我为什么吗

    class AllElements extends Component {

        constructor(props) {
            super(props);
            this.state = {
                myData: [],
                viewingElement: {
                    name:""
                }
            }
             this.see = this.see.bind(this);
            console.log('Initial Sate',this.state.viewingElement);
        }


         see(name) {
        this.setState({
          viewingElement: {
            name:name
          }
        });
        console.log('State after SEE',this.state.viewingElement);
      }

        render() {
            const { myData, viewingElement } = this.state;
        return (
          <div>
            {myData.map(se => (
              <SingleElement
                key={se.id}
                name={se.name}
                see={this.see}
              />
            ))}
              <SingleElementDetails viewingElement={viewingElement}/>
          </div>
        );
        }
    }



    class SingleElement extends Component {
    constructor(props) {
        super(props);
    }

    seefunc(name) {
        this.props.see(this.props.name);
        console.log('Name in seefunc props',this.props.name);
    }

    render() {
        return (
            <div onClick={this.seefunc.bind(this)}>
                DIV CONTENT
            </div>
        )
    }
}

类等位基因扩展组件{
建造师（道具）{
超级（道具）；
此.state={
myData:[]，
查看元素：{
姓名：“
}
}
this.see=this.see.bind（this）；
console.log（'initialstate'，this.state.viewingElement）；
}
见（姓名）{
这是我的国家({
查看元素：{
姓名：姓名
}
});
log（'State after SEE'，this.State.viewingElement）；
}
render（）{
const{myData，viewingElement}=this.state；
返回(
{myData.map（se=>(
))}
);
}
}
类SingleElement扩展组件{
建造师（道具）{
超级（道具）；
}
seefunc（姓名）{
this.props.see（this.props.name）；
log（'seefunc props中的名称'，this.props.Name）；
}
render（）{
返回(
DIV内容
)
}
}

这里的问题是

setState

是异步的。它第一次确实可以工作，但您在

console.log

中看不到它，因为

console.log

发生在状态更新之前

要查看更新的状态，请使用

setState

的第二个参数，这是一个回调函数（）：

在

SingleElement

中，使用react lifecycle中的

componentWillReceiveProps（nextrops）

（）方法查看更新的道具：

seefunc(name) {
        this.props.see(this.props.name);
    }

componentWillReceiveProps(nextprops) {
        console.log('Name in props',nextProps.name);
}

它确实改变了。但是

setState

是一个aync过程，因此您只需将以前的状态记录到控制台<代码>设置状态允许您在异步进程完成后运行代码，因此您可以执行以下操作：

this.setState({
  viewingElement: {
    name:name
  }
}, () => console.log('State after SEE',this.state.viewingElement));

this.setState({
  viewingElement: {
    name:name
  }
}, () => console.log('State after SEE',this.state.viewingElement));