Javascript ReactJS:导入组件时出现材质ui错误

我正在使用

materialui

lib尝试我的应用程序

我创建了一个

表

，只需按照代码进行操作，但得到的错误如下所示

我得到的错误是：

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `TablePaginationActions`.
    in TablePaginationActions (created by WithStyles(TablePaginationActions))
    in WithStyles(TablePaginationActions) (created by TablePagination)

我的

DataTables

组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import {
  ListItem,
  TableFooter,
  TablePagination,
  ListItemText,
  Avatar,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Paper
} from '@material-ui/core';

import TablePaginationActionsWrapped from './TablePaginationActions'

const CustomTableCell = withStyles(theme => ({
  body: {
    fontSize: 14,
    paddingRight: 0,
  },
  head: {
    paddingRight: 0,
  }
}))(TableCell);

const CustomTableRow = withStyles(theme => ({
  root: {},
}))(TableRow);

const CustomTableHead = withStyles(theme => ({
  root: {
    padding: '0'
  },
}))(TableHead);

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

class DataTables extends Component {

  state = {
    data: this.props.reportsList,
    page: 0,
    rowsPerPage: 10,
  }

  handleChangePage = (event, page) => {
    this.setState({page});
  };

  handleChangeRowsPerPage = event => {
    this.setState({rowsPerPage: event.target.value});
  };

  render() {
    const {classes, reportsList} = this.props;
    const {data, rowsPerPage, page} = this.state;
    const emptyRows = rowsPerPage - Math.min(rowsPerPage, data.length - page * rowsPerPage);

    return (
      <Paper className={classes.root}>
        <div className={classes.tableWrapper}>
          <Table className={classes.table}>
            <CustomTableHead>
              <CustomTableRow>
                <CustomTableCell>ID</CustomTableCell>
                <CustomTableCell>Report Title</CustomTableCell>
                <CustomTableCell>Author</CustomTableCell>
                <CustomTableCell>Date created</CustomTableCell>
              </CustomTableRow>
            </CustomTableHead>
            <TableBody>
              {data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(report => {
                return (
                  <CustomTableRow key={report.id}>
                    <CustomTableCell>{report.id}</CustomTableCell>
                    <CustomTableCell component="th" scope="row">
                      {report.title}
                    </CustomTableCell>
                    <CustomTableCell padding="none" component="th" scope="row">
                      <ListItem>
                        <Avatar alt="Avatar image" src={report.userId.avatar}/>
                        <ListItemText>{report.userId.firstName}</ListItemText>
                      </ListItem>
                    </CustomTableCell>
                    <CustomTableCell component="th" scope="row">
                      {report.date}
                    </CustomTableCell>
                  </CustomTableRow>
                );
              })}
              {emptyRows > 0 && (
                <TableRow style={{ height: 48 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
            <TableFooter>
              <TableRow>
                <TablePagination
                  colSpan={3}
                  count={reportsList.length}
                  rowsPerPage={this.state.rowsPerPage}
                  page={this.state.page}
                  onChangePage={this.handleChangePage}
                  onChangeRowsPerPage={this.handleChangeRowsPerPage}
                  ActionsComponent={TablePaginationActionsWrapped}

                  // ActionsComponent={TablePaginationActionsWrapped} If not use this, my app work fine.
                />
              </TableRow>
            </TableFooter>
          </Table>
        </div>
      </Paper>
    );
  }
}

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

export default withStyles(styles)(DataTables);

---

我做错了什么。请帮帮我。

只有一个问题。您对图标组件使用了错误的名称。它是

LastPage

和

FirstPage

而不是

LastPageIcon

和

FirstPageIcon

。只要纠正它，它就会工作得很好

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton'
import { FirstPage, KeyboardArrowLeft, KeyboardArrowRight, LastPage } from '@material-ui/icons'

const actionsStyles = theme => ({
  root: {
    flexShrink: 0,
    color: theme.palette.text.secondary,
    marginLeft: theme.spacing.unit * 2.5
  }
})

class TablePaginationActions extends Component {
  handleFirstPageButtonClick = event => {
    this
      .props
      .onChangePage(event, 0)
  }

  handleBackButtonClick = event => {
    this
      .props
      .onChangePage(event, this.props.page - 1)
  }

  handleNextButtonClick = event => {
    this
      .props
      .onChangePage(event, this.props.page + 1)
  }

  handleLastPageButtonClick = event => {
    this
      .props
      .onChangePage(event, Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1))
  }

  render() {
    const { classes, count, page, rowsPerPage, theme } = this.props

    return (
      <div className={classes.root}>
        <IconButton
          onClick={this.handleFirstPageButtonClick}
          disabled={page === 0}
          aria-label='First Page'>
          {theme.direction === 'rtl'
            ? <LastPage/>
            : <FirstPage />}
        </IconButton>
        <IconButton
          onClick={this.handleBackButtonClick}
          disabled={page === 0}
          aria-label='Previous Page'>
          {theme.direction === 'rtl'
            ? <KeyboardArrowRight />
            : <KeyboardArrowLeft />}
        </IconButton>
        <IconButton
          onClick={this.handleNextButtonClick}
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          aria-label='Next Page'>
          {theme.direction === 'rtl'
            ? <KeyboardArrowLeft />
            : <KeyboardArrowRight />}
        </IconButton>
        <IconButton
          onClick={this.handleLastPageButtonClick}
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          aria-label='Last Page' />
      </div>
    )
  }
}

TablePaginationActions.propTypes = {
  classes: PropTypes.object.isRequired,
  count: PropTypes.number.isRequired,
  onChangePage: PropTypes.func.isRequired,
  page: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
  theme: PropTypes.object.isRequired
}

export default withStyles(actionsStyles, { withTheme: true })(TablePaginationActions)

import React，{Component}来自“React”
从“道具类型”导入道具类型
从“@material ui/core/styles”导入{withStyles}”
从“@material ui/core/IconButton”导入IconButton
从“@material ui/icons”导入{FirstPage，KeyboardArrowLeft，KeyboardArrowRight，LastPage}
const actionsStyles=主题=>({
根目录：{
flexShrink:0，
颜色：theme.palete.text.secondary，
marginLeft:theme.space.unit*2.5
}
})
类TablePaginationActions扩展组件{
handleFirstPageButtonClick=事件=>{
这
.道具
.onChangePage（事件，0）
}
handleBackButtonClick=事件=>{
这
.道具
.onChangePage（事件，this.props.page-1）
}
handleNextButtonClick=事件=>{
这
.道具
.onChangePage（事件，this.props.page+1）
}
handleLastPageButtonClick=事件=>{
这
.道具
.onChangePage（事件，Math.max（0，Math.ceil（this.props.count/this.props.rowsPerPage）-1））
}
render（）{
const{classes，count，page，rowsPerPage，theme}=this.props
返回(
{theme.direction==='rtl'
? 
: }
{theme.direction==='rtl'
? 
: }
=Math.ceil（count/rowsPerPage）-1}
aria label='Next Page'>
{theme.direction==='rtl'
? 
: }
=Math.ceil（count/rowsPerPage）-1}
aria label='Last Page'/>
)
}
}
TablePaginationActions.propTypes={
类：PropTypes.object.isRequired，
计数：需要PropTypes.number.isRequired，
onChangePage:PropTypes.func.isRequired，
页码：PropTypes.number.isRequired，
rowsPerPage:PropTypes.number.isRequired，
主题：PropTypes.object.isRequired
}
使用样式导出默认值（actionsStyles，{withTheme:true}）（TablePaginationActions）

---

试着换一个，它应该能工作。您可以从中检查图标名称。您只需将其转换为大写字母即可使用。像图标

first\u page

在

@material ui/icons

中变成

FirstPage

一样，您将“导入表格分页动作从“./TablePaginationActions”中删除”，并且在您的注释中，您说文件名以**包装器结尾。正确的文件名是什么。您必须在“从导入默认包装”中使用此名称/rightFileName'对格式很抱歉。我在电话中做了评论，但我做错了。@AntonioRodriguez您的意思是从“/TablePaginationActions”下载的

import TablePaginationActions

名称和url应该相同？请尝试

console.log（classes）

或

render（）

方法中的其他变量。我看到你从道具中解构类，但我没有看到它设置在任何地方。不一定。也许我弄糊涂了。我会更深入地看一看。@Phoung这方面运气好吗？

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton'
import { FirstPage, KeyboardArrowLeft, KeyboardArrowRight, LastPage } from '@material-ui/icons'

const actionsStyles = theme => ({
  root: {
    flexShrink: 0,
    color: theme.palette.text.secondary,
    marginLeft: theme.spacing.unit * 2.5
  }
})

class TablePaginationActions extends Component {
  handleFirstPageButtonClick = event => {
    this
      .props
      .onChangePage(event, 0)
  }

  handleBackButtonClick = event => {
    this
      .props
      .onChangePage(event, this.props.page - 1)
  }

  handleNextButtonClick = event => {
    this
      .props
      .onChangePage(event, this.props.page + 1)
  }

  handleLastPageButtonClick = event => {
    this
      .props
      .onChangePage(event, Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1))
  }

  render() {
    const { classes, count, page, rowsPerPage, theme } = this.props

    return (
      <div className={classes.root}>
        <IconButton
          onClick={this.handleFirstPageButtonClick}
          disabled={page === 0}
          aria-label='First Page'>
          {theme.direction === 'rtl'
            ? <LastPage/>
            : <FirstPage />}
        </IconButton>
        <IconButton
          onClick={this.handleBackButtonClick}
          disabled={page === 0}
          aria-label='Previous Page'>
          {theme.direction === 'rtl'
            ? <KeyboardArrowRight />
            : <KeyboardArrowLeft />}
        </IconButton>
        <IconButton
          onClick={this.handleNextButtonClick}
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          aria-label='Next Page'>
          {theme.direction === 'rtl'
            ? <KeyboardArrowLeft />
            : <KeyboardArrowRight />}
        </IconButton>
        <IconButton
          onClick={this.handleLastPageButtonClick}
          disabled={page >= Math.ceil(count / rowsPerPage) - 1}
          aria-label='Last Page' />
      </div>
    )
  }
}

TablePaginationActions.propTypes = {
  classes: PropTypes.object.isRequired,
  count: PropTypes.number.isRequired,
  onChangePage: PropTypes.func.isRequired,
  page: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
  theme: PropTypes.object.isRequired
}

export default withStyles(actionsStyles, { withTheme: true })(TablePaginationActions)