Javascript 什么是未捕获类型错误：无法读取属性'；打开'；对于AppBar+；抽屉组件（材料界面）？

我试图从Material UI framework获取AppBar（）左侧的导航、默认汉堡包图标，以便在单击（）时滑动打开抽屉组件。但是，单击后，我会出现以下错误，我看不出来：

未捕获的TypeError:无法读取未定义的属性“open”

如有任何见解或指导，将不胜感激。先谢谢你

import React, { Component } from 'react'
import { Drawer, AppBar, MenuItem} from 'material-ui'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Route, Router } from 'react-router'



export default class Main extends Component  {

  constructor(props, context){
    super(props, context);
    this.state = {open:false};
  }

  getChildContext() {
    return {muiTheme: getMuiTheme(baseTheme)};
  }

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

        render() {
            return (
                <div>
                <AppBar   
                  isInitiallyOpen={true} 
                  onLeftIconButtonTouchTap={this.handleToggle}        
                  onLeftIconButtonClick={this.handleToggle} 
                />

                <Drawer
                  docked={false}
                  open={this.state.open}>
                  <MenuItem>Menu Item 1</MenuItem>
                  <MenuItem>Menu Item 2</MenuItem>
                  <MenuItem>Menu Item 3</MenuItem>
                </Drawer>
                </div>
            );
        }
    }

export default Main;

import React，{Component}来自“React”
从“物料ui”导入{Drawer，AppBar，MenuItem}
从“材质ui/styles/baseThemes/LightBaseThemes”导入baseTheme
从“材质ui/styles/getMuiTheme”导入getMuiTheme
从“react Router”导入{Route，Router}
导出默认类主扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.state={open:false}；
}
getChildContext（）{
返回{muiTheme:getMuiTheme（baseTheme）}；
}
手语{
this.setState（{open:！this.state.open}）；
}
render（）{
返回(
菜单项1
菜单项2
菜单项3
);
}
}
导出默认主；

您还可以制作函数组件而不是类组件。这将使您的组件更加清晰易读-

import React, { useState } from 'react'
import { Drawer, AppBar, MenuItem } from 'material-ui'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Route, Router } from 'react-router'



export default function Main(props) {

    let [open, setOpen] = useState(false);

    let handleToggle = () => {
        setOpen(!open);
    }

    return (
        <div>
            <AppBar
                isInitiallyOpen={true}
                onLeftIconButtonTouchTap={handleToggle}
                onLeftIconButtonClick={handleToggle}
            />

            <Drawer
                docked={false}
                open={open}>
                <MenuItem>Menu Item 1</MenuItem>
                <MenuItem>Menu Item 2</MenuItem>
                <MenuItem>Menu Item 3</MenuItem>
            </Drawer>
        </div>
    );
}

从“React”导入React，{useState}
从“物料ui”导入{Drawer，AppBar，MenuItem}
从“材质ui/styles/baseThemes/LightBaseThemes”导入baseTheme
从“材质ui/styles/getMuiTheme”导入getMuiTheme
从“react Router”导入{Route，Router}
导出默认主功能（道具）{
let[open，setOpen]=useState（false）；
让handleToggle=（）=>{
setOpen（！open）；
}
返回(
菜单项1
菜单项2
菜单项3
);
}

React的版本是什么？最可能发生的情况是，您的React版本没有将处理程序函数自动绑定到组件，这意味着

Handletogle

中的

this

值不是组件，因此

this.state

未定义。如果是这种情况，要解决这个问题，您可以将

this.handleToggle=this.handleToggle.bind（this）

放在

构造函数中。Thx，这解决了meth的问题，这也解决了我的问题！