Javascript 当我使用setState callback切换dropdown时，我的下拉列表在选择项后打开

我有下拉和切换下拉功能，可通过设置状态回调更改状态：

  toggleDropdown =() => {
    this.setState((prevState) => ({ opened: !prevState.opened }));
  }

问题是，当我在下拉列表中选择项时，下拉列表应该关闭，但当我使用setState回调时并没有关闭。 实际上，它在1秒后关闭，然后再次打开

但是，如果我使用当前状态来更改状态，它就可以正常工作

  toggleDropdown =() => {
    this.setState({ opened: !this.state.opened });
  }

为什么会这样

以下是下拉组件的主要部分：

class SimpleDropdown extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: props.selectValue,
      opened: false
    };

  }

  toggleDropdown =() => {
    this.setState((prevState) => ({ opened: !prevState.opened }));
  }

  onSelect = (option) => {
    this.setState({ selected: option, opened: false });
    this.props.onSelect(option);
  };

  handleClickOutside = () => {
    this.setState({ opened: false });
  };

  render() {
    const { selected } = this.state;
    const { title, isLoading } = this.props;
    console.warn('this.state.opened', this.state.opened);

    return (
      <div className="simple-dropdown" onClick={this.toggleDropdown} role="button">
        <span className="dropdown-title">{title}:</span>
        <span>{selected.value}</span>

---

使用“扩展”操作符不改变对象， 改变

{ opened: !prevState.opened } 

到

---

请尝试使用spread运算符，以避免在切换Dropdown之前调用handleClickOutside的对象{…prevState，opened:！prevState.opened}发生变化？从代码中看不到handleClickOutside是如何使用的？@jure它被用作组件的包装器：导出默认onClickOutsideSimpleDropdown；每次在组件体外部单击时都会调用它。@MarkJames可能会尝试在handleClickOutside内部调用console.log。。可能是在onClick之前调用了click out。。猜猜看：谢谢，我试过了，但还是不起作用。。。无法理解。。。

{...prevState, opened: !prevState.opened }