reactjs - 使用来自 GraphQL 的数据获取 Material-UI 表的动态行数

Question

我正在使用 GRANDstack 构建一个应用程序，该应用程序使用 GraphQL 从图形数据库中提取一些数据。在我的 React 前端中，我创建了一个表来显示具有搜索和排序功能的数据，现在我尝试添加固定数量的分页，每页 20 行，如果少于 20 行，则填充空行形成搜索。

到目前为止，除了动态创建数据集中的总行数外，我已经成功地完成了这项工作。这是当前的输出：

如您所见，我目前正在获取NaN页面上的行数和undefined总行数。

以下是我当前的脚本：

import React from 'react'
import { useQuery } from '@apollo/react-hooks'
import gql from 'graphql-tag'
import { withStyles } from '@material-ui/core/styles'
import {
    TableContainer,
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableRow,
    TablePagination,
    Tooltip,
    Paper,
    TableSortLabel,
    TextField,
} from '@material-ui/core'

import Title from './Title'

const styles = (theme) => ({
    root: {
        maxWidth: 800,
        marginTop: theme.spacing(3),
        overflowX: 'auto',
        margin: 'auto',
    },
    table: {
        minWidth: 800,
    },
    textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        minWidth: 280,
    },
})

const GET_MEM = gql`
  query memPaginateQuery(
    $first: Int
    $offset: Int
    $orderBy: [_MemOrdering]
    $filter: _MemFilter
  ) {
    Mem(first: $first, offset: $offset, orderBy: $orderBy, filter: $filter) {
      id: memID
      mem
      date {
          formatted
      }
      memType
      emoji
    }
  }
`

function MemsList(props) {
    const { classes } = props
    const [order, setOrder] = React.useState('asc')
    const [orderBy, setOrderBy] = React.useState('date')
    const [page, setPage] = React.useState(0)
    const [rowsPerPage, setRowsPerPage] = React.useState(20)
    const [filterState, setFilterState] = React.useState({ memFilter: '' })
    const rows = { GET_MEM }

    const handleChangePage = (event, newPage) => {
        setPage(newPage);
    };

    const handleChangeRowsPerPage = event => {
        setRowsPerPage(parseInt(event.target.value, 20));
        setPage(0);
    };

    const emptyRows =
        rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);

    const getFilter = () => {
        return filterState.memFilter.length > 0
            ? { mem_contains: filterState.memFilter }
            : {}
    }

    const { loading, data, error } = useQuery(GET_MEM, {
        variables: {
            first: rowsPerPage,
            offset: rowsPerPage * page,
            orderBy: orderBy + '_' + order,
            filter: getFilter(),
        },
    })

    const handleSortRequest = (property) => {
        const newOrderBy = property
        let newOrder = 'desc'

        if (orderBy === property && order === 'desc') {
            newOrder = 'asc'
        }

        setOrder(newOrder)
        setOrderBy(newOrderBy)
    }

    const handleFilterChange = (filterMem) => (event) => {
        const val = event.target.value

        setFilterState((oldFilterState) => ({
            ...oldFilterState,
            [filterMem]: val,
        }))
    }

    return (
        <Paper className={classes.root}>
            <Title>MEMs List</Title>
            <TextField
                id="search"
                label="mem contains"
                className={classes.textField}
                value={filterState.memFilter}
                onChange={handleFilterChange('memFilter')}
                margin="normal"
                variant="outlined"
                type="text"
                InputProps={{
                    className: classes.input,
                }}
            />
            {loading && !error && <p>Loading...</p>}
            {error && !loading && <p>Error</p>}
            {data && !loading && !error && (
                <TableContainer component={Paper}>
                    <Table className={classes.table} size="small">
                        <TableHead>
                            <TableRow>
                                <TableCell
                                    key="mem"
                                    sortDirection={orderBy === 'mem' ? order : false}
                                >
                                    <Tooltip title="Sort" placement="bottom-start" enterDelay={300}>
                                        <TableSortLabel
                                            active={orderBy === 'mem'}
                                            direction={order}
                                            onClick={() => handleSortRequest('mem')}
                                        >
                                            mem
                    </TableSortLabel>
                                    </Tooltip>
                                </TableCell>
                                <TableCell
                                    key="date"
                                    sortDirection={orderBy === 'date' ? order : false}
                                >
                                    <Tooltip title="Sort" placement="bottom-start" enterDelay={300}>
                                        <TableSortLabel
                                            active={orderBy === 'date'}
                                            direction={order}
                                            onClick={() => handleSortRequest('date')}
                                        >
                                            date
                    </TableSortLabel>
                                    </Tooltip>
                                </TableCell>
                                <TableCell
                                    key="memType"
                                    sortDirection={orderBy === 'memType' ? order : false}
                                >
                                    <Tooltip title="Sort" placement="bottom-start" enterDelay={300}>
                                        <TableSortLabel
                                            active={orderBy === 'memType'}
                                            direction={order}
                                            onClick={() => handleSortRequest('memType')}
                                        >
                                            memType
                    </TableSortLabel>
                                    </Tooltip>
                                </TableCell>
                                <TableCell
                                    key="emoji"
                                    sortDirection={orderBy === 'emoji' ? order : false}
                                >
                                    <Tooltip title="Sort" placement="bottom-end" enterDelay={300}>
                                        <TableSortLabel
                                            active={orderBy === 'emoji'}
                                            direction={order}
                                            onClick={() => handleSortRequest('emoji')}
                                        >
                                            Feeling
                    </TableSortLabel>
                                    </Tooltip>
                                </TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {data.Mem.map((n) => {
                                return (
                                    <TableRow key={n.id}>
                                        <TableCell component="th" scope="row">{n.mem}</TableCell>
                                        <TableCell>{n.date.formatted}</TableCell>
                                        <TableCell>{n.memType}</TableCell>
                                        <TableCell>{n.emoji}</TableCell>
                                    </TableRow>
                                )
                            })}
                            {emptyRows > 0 && (
                                <TableRow style={{ height: 53 * emptyRows }}>
                                    <TableCell colSpan={6} />
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                    <TablePagination
                        rowsPerPageOptions={[20]}
                        component="div"
                        count={rows.length}
                        rowsPerPage={rowsPerPage}
                        page={page}
                        onChangePage={handleChangePage}
                        onChangeRowsPerPage={handleChangeRowsPerPage}
                    />
                </TableContainer>
            )}
        </Paper>
    )
}

export default withStyles(styles)(MemsList)

我遇到的具体问题是计算rows.length，因为我已经从一个将行定义为数组的示例修改了这一点，而不是使用 GraphQL 从图形数据库中提取。搜索表时也存在计算挑战，rows.length因为搜索时行数会减少。