Javascript 设置状态不'；无法在事件处理程序中工作

我试图根据道具更新onClick事件处理程序中的状态。 在console.log中，我得到了空字符串作为初始状态值

我已经尝试使用状态挂钩而不是状态来更改组件的功能。 当onClick为invoke时，我尝试使用方法更新状态。 我已经尝试使用类似问题的答案中的建议，这个案例不同，可能是因为我在事件处理程序中使用了setState

有人知道这里有什么问题吗？ 提前谢谢

class DropDownItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedItem : "" 
    }
    this.updateItem = this.updateItem.bind(this)
  }

  updateItem (item) {
    this.setState({selectedItem : item})
  }

  render(){
    return (
      <div>
        <DropdownItem onClick={() => {
            this.updateItem(this.props.product)
            console.log("item",this.state.selectedItem)
          }}  
        >{this.props.product}</DropdownItem>
        <DropdownItem divider/>
      </div>
    )
  }
}

class DropDownItem扩展组件{
建造师（道具）{
超级（道具）
此.state={
selectedItem:“
}
this.updateItem=this.updateItem.bind（this）
}
更新项（项目）{
this.setState（{selectedItem:item}）
}
render（）{
返回(
{
this.updateItem（this.props.product）
console.log（“项”，this.state.selectedItem）
}}  
>{this.props.product}
)
}
}

以下是父组件的主体：

render() {




  const productItems = this.state.products.map((productValue,index) => {
    return(<DropDownItem key={index} product={productValue.name}  />)
  })

    return (
<div>

  {this.state.products[0] && Array.isArray(this.state.products)  ? 
     <div>
       <DropdownComponent
      isOpen={this.state.dropdownOpen} 
      toggle={this.toggle}
      product={productItems}

       />
     </div> :
     <div>loading...</div>}     
</div>

    )}

render（）{
const productItems=this.state.products.map（（productValue，index）=>{
返回（）
})
返回(
{this.state.products[0]&&Array.isArray（this.state.products）？
:
正在加载…}
)}

我想更新状态，以便向用户显示单击的下拉项。

setState（）

批量更新，因此

此状态不会立即反映更新

解决方案是在
setState（）
的回调中读取
this.state
：


类下拉列表扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={selectedItem:null}
}
更新项（选择编辑项，回调）{
this.setState（{selectedItem}，回调）
}
render（）{
返回(
{
this.updateItem（event.target.value，
（）=>console.log（'item'，this.state.selectedItem））
}}>
A.
B
)
}
}
ReactDOM.render（，document.getElementById（'root'））
您应该在回调中获得更新的状态，该状态作为
setState
中的第二个参数提供，如下所示

class DropDownItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedItem : "" 
    }
    this.updateItem = this.updateItem.bind(this)
  }

  updateItem (item, callback) {
    this.setState({selectedItem : item}, callback)
  }

  render(){
    return (
      <div>
        <DropdownItem onClick={() => {
            this.updateItem(this.props.product, ()=>{
                console.log("item",this.state.selectedItem)
            })
          }}  
        >{this.props.product}</DropdownItem>
        <DropdownItem divider/>
      </div>
    )
  }
}

class DropDownItem扩展组件{
建造师（道具）{
超级（道具）
此.state={
selectedItem:“
}
this.updateItem=this.updateItem.bind（this）
}
updateItem（项，回调）{
this.setState（{selectedItem:item}，回调）
}
render（）{
返回(
{
this.updateItem（this.props.product，（）=>{
console.log（“项”，this.state.selectedItem）
})
}}  
>{this.props.product}
)
}
}
this.setState
是异步的，这意味着当您记录
this.state.selectedItem时，它仍然是空的。再次单击它应该记录更改的状态。如果您使用console.log
this.props.product
，您会得到什么？您能否向我们展示您的组件是如何使用的（即，您向它传递了哪些道具）？setState是异步的。Try:this.setState（{selectedItem:item}，（）=>{console.log（“item”，this.state.selectedItem）}）；如本文所述，感谢您的评论。在控制台日志中，我得到了这个.props.product作为所需的值。我尝试了@camen6ert建议，不幸的是我得到了同样的结果。谢谢你提供了信息丰富的答案。这似乎是解决方案，但状态仍然没有改变。看看这个小提琴，打开控制台，然后单击“谢谢！”！你的回答帮助我找到了解决办法！