反应setState奇怪的行为

Question

New to React, in the following code I am passing data between two components via the parent. Flow is from Search to the parent App then to another child Sidebar . I am able to send to both from Search to App and App to Sidebar individually but for some reason setState is not behaving as expected making the link to trigger a refresh of <Search updateMenu={this.handleSearchResult} /> as you can see in the console.log code comments below:

import React, { Component } from 'react';
import './App.css';
import Search from './Search';
import Sidebar from './Sidebar';

class App extends Component {

   constructor() {
      super()
      this.state = {
         menu: []
      }
   }

  handleSearchResult = (array) => {

    // always the correct value
    console.log('in ', array);

    this.setState( {menu: menuList})

    // 1st call : empty
    // 2nd call : previous value not showing on 1st call + new value as expected 
    //            does not trigger  <Sidebar list={this.state.menu}/>
    console.log('out', this.state.menu);

  }

  render() {
    return (
      <div className="App">

        // not refreshing
        <Search updateMenu={this.handleSearchResult} />

        <Sidebar list={this.state.menu}/>

      </div>
    );
  }
}

export default App;

Answer 1

Logging this.setState() . Is not so straight forward. this.setState() is asynchronus.

Here is a reference on Medium.