ReactJS（带 coreui）：下拉组件不反映正确的菜单点击

Question

我试图用 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 库。

Answer 1

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

ReactJS（带 coreui）：下拉组件不反映正确的菜单点击

ReactJS (with coreui): Dropdown component does not reflect the correct menu click

javascript

reactjs

core-ui