Question

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

我已经尝试使用状态挂钩（而不是状态）将组件更改为功能。我尝试使用方法在调用onClick时更新状态。我已经尝试在类似问题的答案中使用建议，这种情况有所不同，可能是因为我在事件处理程序中使用了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>
    )
  }
}

这是父组件的主体：

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>

    )}

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

Answer 1

setState()分批更新，因此this.state不会立即反映更新。

作为@camen6ert already pointed out的解决方案是在this.state的回调中读取setState()：

class DropDown extends React.Component {
  constructor(props) {
    super(props)
    this.state = {selectedItem: null}
  }
  updateItem(selectedItem, callback) {
    this.setState({selectedItem}, callback)
  }
  render() {
    return (
      <select onChange={event => {
        this.updateItem(event.target.value,
          () => console.log('item', this.state.selectedItem))
      }}>
        <option>A</option>
        <option>B</option>
      </select>
    )
  }
}

ReactDOM.render(<DropDown />, document.getElementById('root'))

<script src="//cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您应该在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>
    )
  }
}

setState在事件处理程序中不起作用

2 个答案: