React-Bootstrap onSelect Methode zum Ändern des Status

Question

Ich habe eine Dropdown-Taste, wenn ich eine <menuItem> von der Schaltfläche auswählen.

ich versuche, eine Funktion auszuführen, die setState({fltrName:"pentium}).

ist die Sache, dass es Arbeit tut die Funktion wird ausgeführt und es console.log(), aber es ändert nicht den Staat und warum ist das? hier ist die Funktion

 fltrFunc:function(name){ 

     function fltrPick(pick){   
     this.setState({fltrName:pick}) // sholud set to "pentium" 
     console.log(this.state.fltrName) //but console "proccessor" (dosent change) 
     } 

     switch(name){ 
      case "processors": 
      return (
       <DropdownButton id="dropdownBtn" bsSize="xsmall" title={name} > 
       <MenuItem eventKey="1" onSelect={fltrPick.bind(this,"pentium")} >pentium </MenuItem> 

      // above should run the func fltrPick() and change the state 

       <MenuItem eventKey="2">i3</MenuItem> 
       <MenuItem eventKey="3">i7</MenuItem> 
       </DropdownButton> 
        ) 
      braek; 
      default: return <DropdownButton title="nothing for now"> </DropdownButton> 
        } 
     }, 

Answer 1

Das erste, was Sie wissen müssen, ist, dass setState ist asynchron, was bedeutet, dass, wenn Sie setState nennen, ruft sie später anstehend Übergang und Updates.

Das bedeutet, dass console.log() alten Wert von state schreiben wird, obwohl es sich geändert hat. Der Status wird später aktualisiert. Außerdem würde ich raten Sie ES7 Pfeil Syntax zu verwenden, wenn Funktionen vorbei, so onSelect würde dieses onSelect={() => fltrPick('pentium'))} und Funktion aussehen wie diese

fltrPick = (pick) => { 
    this.setState({fltrName:pick})  
} 

(Sie es nicht auf diese Weise brauchen zu binden).