

現在、Material UIライブラリのドキュメントに載っているページネーションを使ったテーブルを作成したいと考えています。

追記:<https://teratail.com/questions/311503> にも質問してあります。

具体的には、 <https://material-ui.com/components/tables/> に載っているCustom pagination
actionsを実装したいです。

画像：

[![画像の説明をここに入力](https://i.stack.imgur.com/8jYdh.png)](https://i.stack.imgur.com/8jYdh.png)

PagenationTableComponent.jsにaxiosで渡ってきたjsonデータを表示したいのですが、下記のようなエラーが出てしまいます。

このrows.sliceが機能していないというのがどうすれば修正できるかご教示お願いします。

jsonデータは以下のようなものです。

[code]

    [{"listNo":1,
    "saiyouDate":"2008-10-06 ",
    "softwareName":"Symantec Endpoint Protection",
    "version":"‐",
    "shubetu":"有償",
    "licenseManage":"○",
    "youto":"ウイルス対策",
    "bikou":"使用する場合はシステム管理まで連絡が必要",
    "authorizer":"山田",
    "approvalDate":"2008-10-06 ",
    "url":"https://jp.broadcom.com/products/cyber-security/endpoint/end-user"}]
    
[/code]

[code]

    TypeError: rows.slice is not a function
    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
    ▶ 17 stack frames were collapsed.
    
[/code]

PagenationTableComponent.js

[code]

    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>
        );
    }
    
    
    
[/code]

CheckList.js

[code]

    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();
    
[/code]


CC BY-SA 4.0
2020-12-21T08:29:01.180
72796
2022-09-20T19:07:15.640
2021-04-04T00:54:19.327
32986
43229
question
reactjs axios material-design
Material UIライブラリのサンプルテーブルを実装しようとしたらエラー rows.slice is not a functionが出る


海外版のスタックオーバーフローでも質問して、解決しましたので詳細を記載いたします。  
自分で定義したrow要素を削除して、代わりに以下の内容をTablePagenationActionに書きます。

[code]

    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
    
[/code]

この状態では、データの量によってCSSが乱れてしまうので調整が必要でした。  
以上です。


CC BY-SA 4.0
2020-12-22T05:27:58.063
72817
2020-12-22T05:27:58.063
43229
72796
answer