ReactJS(使用coreui):下拉组件未反映正确的菜单单击

我试图用ReactJS和coreui组件构建一个前端。这是我试图实现“下拉”菜单的代码:

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