使用 Material-UI + React 实现 Drawer & AppBar {Cannot read property 'open' of null}

Question

所以我正在尝试使用React 和Material-UI 创建一个应用程序，因此我设法启动并运行了 AppBar，但在让抽屉工作时遇到了一些问题。

我不断收到error: cannot read property open of null，并试图找出问题所在，但没有成功。我在 Stack 上找到了 2 篇关于这个确切问题的帖子，他们都没有能够解决我的问题的答案

Having trouble using Appbar + Drawer (Material UI + ReactJS)

What is Uncaught TypeError: Cannot read property 'open' of undefined for AppBar + Drawer component (ReactJS + Material-UI)?

这是我当前的代码：

constructor() {
    super();
    this.handleToggle = this.handleToggle.bind(this)
    this.handleClose = this.handleClose.bind(this)
    this.setState = {
      open: false
    };
  }

  handleToggle = () => this.setState({open: !this.state.open});

  handleClose = () => this.setState({open: false});

  render() {
    return <MuiThemeProvider muiTheme={getMuiTheme()}>
        <AppBar
          onLeftIconButtonTouchTap={this.handleToggle}
          onLeftIconButtonClick={this.handleToggle}
          title="How long have you been alive?"
          iconClassNameRight="muidocs-icon-navigation-expand-more" />
        <Drawer
          docked={false}
          width={200}
          open={this.state.open}
          onRequestChange={(open) => this.setState({open})}
        >
          <MenuItem onTouchTap={this.handleClose}>Menu Item 1</MenuItem>
          <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
        </Drawer>
      </MuiThemeProvider>
  }

（snippit 不应该运行，只显示我的相关代码）

我认为将this 绑定到render 可能会有所帮助，但它没有:(

Answer 1

您的代码中的问题是您没有在构造函数中设置状态。构造函数中的this.setState错误，需要替换为this.state

constructor() {
    super();
    //...other lines of codes that you may intend to write

    this.state = {
      open: false
    };

  }

this.setState() 是一种方法，您可以调用该方法从 Component-Class 的任何方法（render() 和 constructor() 除外）更新组件的状态