Warum gibt SetState nicht definiert zurück?

Question

Ich versuche, ein Modal zu schließen, wenn ein Benutzer außerhalb des Modal-Elements drückt. Irgendwie, wenn Dismiss() aufgerufen wird, ist der Zustand immer noch derselbe im Rückruf.

Warum passiert das?

export default class Message extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      id: "", 
      show: false 
     }; 
    } 

    componentDidMount() { 
     this.props.onRef(this); 
    } 

    Show(id) { 
     this.setState({ 
      id: id, 
      show: true 
     }); 
    } 

    Dismiss() { 
     this.setState({ 
      id: '', 
      show: false 
     }, function (state) { 
      console.log(state) // undefined 
     }); 
    } 

    render() { 
     if (this.state.show) { 
      return (
       <Modal close={() => this.Dismiss()}> 
        <h1>{this.state.id}</h1> 
       </Modal> 
      ); 
     } else { 
      return null 
     } 
    } 
} 

Answer 1

nicht sicher, warum es ist ein Zustand Argument in Ihrer Callback sollte nur

Dismiss() { 
    this.setState({ 
     id: '', 
     show: false 
    }, function() { 
     console.log(this.state) 
    }); 
} 

Answer 2

Ja, das heißt, weil this.setState Funktion in async Reagieren ist. Und der neue Zustand ist nur in den event queue

Hier ist, was ich meine:

this.setState({newAdded: "test"}); 
let youCannotGetIt = this.state.newAdded; // here is undefined, because this.setSate is async