ReactJS带有coreui：下拉组件无法反映正确的菜单单击

如何解决ReactJS带有coreui：下拉组件无法反映正确的菜单单击

我试图使用ReactJS和coreui组件构建前端。这是我尝试实现“ Dropdown”菜单的代码：

class DropdownTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,};
  }

  handleClick(i) {
    this.setState({ value: i });
    console.log("clicked " + i + ",this.state.value = " + this.state.value);
  }

  renderItem(value) {
    return (
      <CDropdownItem key={value} onClick={() => this.handleClick(value)}>
        {value}
      </CDropdownItem>
    );
  }

  render() {
    return (
      <CDropdown id="axes-dd" className="float-right mr-0" size="sm">
        <CDropdownToggle id="axes-ddt" color="secondary" size="sm">
          Axes
        </CDropdownToggle>
        <CDropdownMenu>
          {this.renderItem(0)}
          {this.renderItem(1)}
          {this.renderItem(2)}
        </CDropdownMenu>
      </CDropdown>
    );
  }
}

这是前端组件：

我想要保留一个变量（例如state.value），该变量将跟踪我单击的菜单项。但是，当我运行上面的示例时，我发现上面的代码无法正确跟踪单击顺序。在控制台上，我得到了这些输出-

例如，当我第一次单击菜单0时，控制台输出为clicked 0,this.state.value = null，尽管我是在更新状态后打印的（请参见handleClick(i)函数）。再次单击菜单1时，控制台输出为clicked 1,this.state.value = 0，依此类推。你明白我的意思。

我该如何解决？

注意：组件CDropdown，CDropdownMenu，CDropdownToggle，CDropdownItem来自coreui库。

解决方法

setState（）可以异步设置状态。因此，如果要确保使用更新后的状态，则应给它（setState方法）一个在状态更新后运行的回调。

handleClick(i) {
    this.setState({ value: i },() => {
       console.log("clicked " + i + ",state.value = " + this.state.value);
    });
}

有关更多信息，请参见：：>> https://reactjs.org/docs/react-component.html#setstate