javascript - 当我使用 setState 回调来toggleDropdown 时，我的下拉列表在选择项目后打开

Question

我有 dropdown 和toggleDropdown 函数，它们通过 setState 回调更改状态:

  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>

Answer 1

使用扩展运算符不改变对象，改变

{ opened: !prevState.opened } 

到

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