材质 UI 表错误"TypeError: rows.slice is not a function"

Question

我对Material UI表有问题。我搜索了Material UI表文档https://material-ui.com/components/tables/.我想知道如何用我的Jscode应用pagenation"；CheckListComponent.js"像"；自定义分页操作"在这些文件中。我刚刚将该文档中的createData更改为Jsondata。现在我混淆了这个错误

CustomPaginationActionsTable
C:/workspace/spring-backend-3/frontend/src/component/PagenationTableComponent.js:117
114 | return (
115 |     <TableContainer component={Paper}>
116 |         <Table className={classes.table} aria-label="custom pagination table">
> 117 |             <TableBody>
| ^  118 |                 {(rowsPerPage > 0
119 |                     ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
120 |                     : rows
View compiled

我理解这意味着什么，但我不明白我应该在哪里解决。请告诉我怎么修。在日本，现在没有人告诉我如何修复。

CheckList.js

import axios from 'axios'
const CHECKLIST_REST_API_URL = 'http://localhost:8080/api/users';
class CheckListService {
getList() {
return axios.get(CHECKLIST_REST_API_URL);
}
}

export default new CheckListService();

PagenationTableComponent.js

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableFooter from '@material-ui/core/TableFooter';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';
import CheckListService from '../services/CheckList';
const useStyles1 = makeStyles((theme) => ({
root: {
flexShrink: 0,
marginLeft: theme.spacing(2.5),
},
}));
function TablePaginationActions(props) {
const classes = useStyles1();
const theme = useTheme();
const { count, page, rowsPerPage, onChangePage } = props;
const handleFirstPageButtonClick = (event) => {
onChangePage(event, 0);
};
const handleBackButtonClick = (event) => {
onChangePage(event, page - 1);
};
const handleNextButtonClick = (event) => {
onChangePage(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
<div className={classes.root}>
<IconButton
onClick={handleFirstPageButtonClick}
disabled={page === 0}
aria-label="first page"
>
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
</IconButton>
<IconButton onClick={handleBackButtonClick} disabled={page === 0} aria-label="previous page">
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
</IconButton>
<IconButton
onClick={handleNextButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</IconButton>
<IconButton
onClick={handleLastPageButtonClick}
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
</IconButton>
</div>
);
}
TablePaginationActions.propTypes = {
count: PropTypes.number.isRequired,
onChangePage: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired,
};
let rows = [];
rows = CheckListService.getList().then((response) => {
return response.data
});

const useStyles2 = makeStyles({
table: {
minWidth: 500,
},
});
export default function CustomPaginationActionsTable() {
const classes = useStyles2();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="custom pagination table">
<TableBody>
{(rowsPerPage > 0
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((row) => (
<TableRow key={row.listNo}>
<TableCell component="th" scope="row">
{row.listNo}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.saiyouDate}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.softwareName}
</TableCell>
</TableRow>
))}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
colSpan={3}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: { 'aria-label': 'rows per page' },
native: true,
}}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
);
}

PostScript:我写了一个代码，如下所述。然后我得到了新的错误"useEffect"没有在控制台中定义。所以我导入"；从"react"导入｛useState｝"但没有解决。我应该怎么编译？

export default function CustomPaginationActionsTable() {
const classes = useStyles2();
const [page, setPage] = React.useState(0);
const [rows, setRows] = React.useState([]);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
useEffect(() => {
CheckListService.getList().then((response) => setRows(response.data)); // you may need to check if response.data returns an array, otherwise you will face errors.
}, [])

return (
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="custom pagination table">
<TableBody>
{(rowsPerPage > 0
? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: rows
).map((row) => (
<TableRow key={row.listNo}>
<TableCell component="th" scope="row">
{row.listNo}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.saiyouDate}
</TableCell>
<TableCell style={{ width: 160 }} align="right">
{row.softwareName}
</TableCell>
</TableRow>
))}
{emptyRows > 0 && (
<TableRow style={{ height: 53 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
colSpan={3}
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: { 'aria-label': 'rows per page' },
native: true,
}}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
);
}

Answer 1

欢迎sy torii。您需要从函数外部删除row变量。相反，在CustomPaginationActionsTable中包含一个行状态。然后使用useEffect在组件装载上获取行。

import React, { useEffect } from 'react'; // import useEffect
export default function CustomPaginationActionsTable() {
const classes = useStyles2();
const [page, setPage] = React.useState(0);
const [rows, setRows] = React.useState([]);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
useEffect(() => {
CheckListService.getList().then((response) => setRows(response.data)); // you may need to check if response.data returns an array, otherwise you will face errors.
}, []) // passing an empty array will call this function only at component mount