javascript - 这是更新依赖于 prevState 的状态的有效方法吗？

Question

我正在观看有关使用 React 的视频教程。演示者当前正在详细介绍如何向 UI 添加切换按钮。他们说先尝试一下，然后看看他们是如何做的，所以我自己实现了。我的实现与他们的有点不同，只是处理程序不同；但它似乎确实有效。

任何有更多使用React经验的人都可以告诉我，我的toggleSideDrawerHandler在某些方面是错误的吗？或者它是设置依赖于先前状态的状态的有效较短方法？

我的实现:

//Layout.js
class Layout extends Component {
  state = {
    showSideDrawer: false
  };

  toggleSideDrawerHandler = prevState => {
    let newState = !prevState.showSideDrawer;
    this.setState({ showSideDrawer: newState });
  };

  closeSideDrawerHandler = () => {
    this.setState({ showSideDrawer: false });
  };

  render() {
    return (
      <Fragment>
        <Toolbar drawerToggleClicked={this.toggleSideDrawerHandler} />
        <SideDrawer
          open={this.state.showSideDrawer}
          close={this.closeSideDrawerHandler}
        />
        <main className={styles.Content}>{this.props.children}</main>
      </Fragment>
    );
  }
}

//Toolbar.js
const toolbar = props => (
  <header className={styles.Toolbar}>
    <DrawerToggle clicked={props.drawerToggleClicked} />
    <div className={styles.Logo}>
      <Logo />
    </div>
    <nav className={styles.DesktopOnly}>
      <NavItems />
    </nav>
  </header>
);

教程实现:

toggleSideDrawerHandler = () => {
    this.setState(prevState => {
      return { showSideDrawer: !prevState.showSideDrawer };
    });
  };

Answer 1

您的解决方案有效，但我想在您调用 toggleSideDrawerHandler 的部分中，您可能会这样调用它

() => this.toggleSideDrawerHandler(this.state)

对吗？如果没有，您可以粘贴其余的代码(尤其是调用部分)来查看从哪里获取 prevState 吗？

这是可行的，因为您将旧状态传递给了该方法。我个人更喜欢教程的实现，因为它负责处理依赖关系，并且“用户”(使用它的开发人员)不需要了解有关预期数据的任何信息。

对于第二种实现，您所需要做的就是调用该函数，而不用考虑获取旧状态并将其传递给它。

添加其余代码后更新:

我认为它起作用的原因是因为参数的默认值是事件默认传递的值，它是一个 event 对象。如果您使用 prevState.showSideDrawer，您将在此事件对象上调用未知元素，该元素将为 null。

现在，如果您使用 !prevState.showSideDrawer，您实际上将其定义为 !null(反转 null/false)，这将是 true。

这就是它可能有效的原因。

也许尝试通过再次显示和隐藏代码来切换代码两次。显示它可能会起作用，但再次隐藏它就不行了。这就是为什么其他代码是正确的。