使用 Material-UI + React 实现抽屉和 AppBar {无法读取 属性 'open' of null}

Question

所以我正在尝试使用 React & Material-UI 来创建一个应用程序，所以我设法启动了 AppBar 并 运行ning 但在获取抽屉工作。

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

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() 是您从组件的任何方法调用以更新组件状态的方法-Class 除了 render() 和 constructor()