TypeError：无法读取属性＆＃39; root＆＃39;未定义的

Question

我试图将Material-Ui的BasicTable函数放到我的React.js文件中。
这是我的代码。

 import React, { Component } from 'react';
 import { Route, Redirect, Switch, Link, HashRouter} from 'react-router-dom';
 import firebase, { auth, provider } from '../firebase.js';
 import '../App.css';

 // Material-ui theme
 import NavBar from '../profile_pages/navBar';

 //For Table Material-ui
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table';
 import Paper from 'material-ui/Paper';

 const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

let id = 0;
function createData(name, calories, fat, carbs, protein) {
  id += 1;
  return { id, name, calories, fat, carbs, protein };
}

const data = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
  createData('Eclair', 262, 16.0, 24, 6.0),
  createData('Cupcake', 305, 3.7, 67, 4.3),
  createData('Gingerbread', 356, 16.0, 49, 3.9),
];

function BasicTable(props) {
  const { classes } = props;

  return (
    <Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell numeric>Calories</TableCell>
            <TableCell numeric>Fat (g)</TableCell>
            <TableCell numeric>Carbs (g)</TableCell>
            <TableCell numeric>Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map(n => {
            return (
              <TableRow key={n.id}>
                <TableCell>{n.name}</TableCell>
                <TableCell numeric>{n.calories}</TableCell>
                <TableCell numeric>{n.fat}</TableCell>
                <TableCell numeric>{n.carbs}</TableCell>
                <TableCell numeric>{n.protein}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </Paper>
  );
}

class Charity extends Component {
  constructor() {
    super()
    this.state = {
      open: false
    }
  }

  //For nav
  handleToggle() {
    this.setState({
      open: !this.state.open
    })
  }

  render() {
   return (
      <div>
        <NavBar
          onToggle={() => this.handleToggle()}
          open={this.state.open}
        />

        {<BasicTable/>}
      </div>
    );
  }
}

BasicTable.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default Charity;

现在我有一些错误如下。

 <BasicTable>

  42 |  const { classes } = props;
  43 | 
  44 |  return (
> 45 |    <Paper className={classes.root}>
  46 |      <Table className={classes.table}>
  47 |        <TableHead>
  48 |          <TableRow>

<./src/index.js>
   8 | //make click events enable to use 
   9 | injectTapEventPlugin();
  10 | 
> 11 | ReactDOM.render(<Root/>, document.getElementById('root'));
  12 | registerServiceWorker();
  13 | 
  14 | 

我在动作上堆叠的内容是关于在Charity类的渲染中调用BasicTable（props）函数的方法。

我该如何解决错误？
BasicTable（）函数来自Material-ui网站（https://material-ui-next.com/demos/tables/）的示例 然后我把代码放到我的那个没有任何改变。

Answer 1

• 您的道具不包含classes
• 如果您想要访问styles常量中的类，那么您可能希望这样做styles(/*your theme name/*).root

const { classes } = props;执行此操作会分配classes=undefined，然后当您尝试访问classes.root时，它会抛出错误。

现在，你可以改变这个

<Paper className={classes.root}>
      <Table className={classes.table}>

要

// Because the theme argument is never used in the function
<Paper className={styles("").root}>
      <Table className={styles("").table}>

或在慈善组件中更改此行

{<BasicTable />}

要

{<BasicTable classes={styles("")}/>}给定样式

Answer 2

解决问题（＆＃34; TypeError：无法读取属性＆＃39; root＆＃39; of undefined ＆＃34;），我将{<BasicTable />}修改为{<BasicTable classes={styles("")}/>}，收到了@Nandu Kalidindi的建议。
是的，我终于可以制作一张Material-ui的表格，但又出现了另一个问题 我制作的导航栏已经到了某个地方。

我会附上照片。
[修复前]

[解决类型错误后]

你们知道为什么会发生这种错误吗？ 我怎么能解决这个错误呢？ 我想在修复Type错误后继续使用导航栏。