setState nicht in Funktionsaufruf aktualisieren

Question

Ich habe viele Beiträge zu diesem Problem gelesen, etwas über this.setState ist ein asynchroner Aufruf, so dass es nicht jedes Mal neu gerendert wird. Wie nähere ich dieses Problem den folgenden Zusammenhang gegeben:

getInitialState:() -> 
    return { 
     page: "" 
    } 

choose: (event) -> 
    console.log(@props.id) # This is the correct id that I want to pass into state 
    @setState({ 
     page: @props.id # @state.page isn't being set to @props.id 
    }) 

render:() -> 
    return (
     <button onClick={@choose}>Click me</button> 
    ) 

Ich habe versucht, zu bind nennen die onClick wie onClick={@choose.bind(@)} aber es scheint, dass dies bereits tut automatisch reagieren. Wie stelle ich den Zustand in choose() richtig ein, nachdem ich auf den Knopf geklickt habe?

LÖSUNG: Dies ist die untergeordnete Komponente, die eine übergeordnete Komponente aufruft, so dass die state irgendwo dort verloren gegangen ist. Alles, was ich zu tun hatte, war, die id von der Elternkomponente als Requisiten anzurufen und auf sie zuzugreifen.

Answer 1

Ihr Code scheint korrekt zu sein. setState ist nicht garantiert synchron, seine Ausführung könnte sich verzögern. Es bedeutet, dass, wenn Sie versuchen, @state.name direkt nach dem im Code @setState zuzugreifen, gehen Sie alten Wert erhalten

choose: (event) -> 
    console.log(@props.id) # This is the correct id that I want to pass into state 
    @setState({ 
    page: @props.id # @state.page isn't being set to @props.id 
    }) 
    console.log(@state.name) # here's old value 

So sollen Sie zweiten Parameter der @setState verwenden, die Callback-Funktion, die direkt aufgerufen werden, werden nach Zustand der Aktualisierung , so