Question

当我从按钮中选择<menuItem>时，我有一个下拉按钮。

我试图运行setState({fltrName:"pentium})。

的函数

事情是它会运行该函数并且它console.log()，但它没有改变状态，为什么呢？这是函数

     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

您需要知道的第一件事是setState是异步，这意味着当您调用setState时，它会调用挂起状态转换并在以后更新它。

话虽如此，这意味着console.log（）将写入state的旧值，即使它已更改。状态随后得到更新。另外，我建议你在传递函数时使用ES7箭头语法，所以onSelect看起来像这个onSelect={() => fltrPick('pentium'))}并且像这样的函数

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

（你不需要这样绑定它。）

React-bootstrap onSelect方法改变状态

1 个答案: