React setState未立即更新状态 下拉菜单需选中两次才生效问题

问题原因 #

• React中setState是异步批量更新接口，调用后不会立刻修改当前组件的this.state值。你在setState执行后立刻打印状态、触发后续逻辑，拿到的都是更新前的旧值，所以第一次选择后逻辑跑的是旧数据，第二次选择时才能拿到第一次更新后的值，就出现了需要选两次才生效的问题。
• 不要手动调用componentDidMount生命周期函数，这个方法是React在组件挂载完成后自动触发的，依赖最新state的后续逻辑应该放到setState的第二个回调参数里执行，这个回调会在state更新完成、视图重渲染后才触发。

修复后的代码 #

<Dropdown
  onSelect={(e) => {
    let newVal = ""
    if (e === "YES") {
      newVal = ""
    } else if (e === "NO") {
      newVal = "N"
    } else if (e === "ONLY") {
      newVal = "Y"
    }
    // setState第二个参数为更新完成后的回调，所有依赖新state的逻辑都放在这里
    this.setState({
      BasePlantsSiteHire: newVal,
    }, () => {
      // 此处拿到的state已经是最新值
      console.log("Status Updated: ", this.state.BasePlantsSiteHire)
      // 把你之前写在componentDidMount里的刷新详情的逻辑放到这里即可，不要直接调用componentDidMount
      // 建议把获取详情的逻辑单独抽成公共方法，比如getDetail()，挂载时调用一次，这里需要刷新时再调用一次
    })
  }}
>
  <Dropdown.Toggle style={{ background: "none", border: "none" }}>
    <CIcon name="cil-settings" />
  </Dropdown.Toggle>
  <Dropdown.Menu className="pt-0" placement="bottom-end">
    <Dropdown.Item
      eventKey="YES"
      name="YES"
      key="YES"
      value="YES"
    >
      SubHire Include
    </Dropdown.Item>
    <Dropdown.Item eventKey="NO" name="NO" key="NO" value="NO">
      SubHire Exclude
    </Dropdown.Item>
    <Dropdown.Item
      eventKey="ONLY"
      name="ONLY"
      key="ONLY"
      value="ONLY"
    >
      SubHire Only
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

额外优化建议 #

可以把多分支条件判断用对象映射简化，代码更简洁易维护：

const valMap = {
  YES: '',
  NO: 'N',
  ONLY: 'Y'
}
const newVal = valMap[e] ?? ''

内容的提问来源于stack exchange，提问作者jude