reactjs - 警告：validateDOMNesting(...): 不能作为子级出现

Question

非常直接的表。我正在使用 React、typescript 和 Material UI。无论我如何重新排列与表格和表格容器相关的表格页脚的顺序，我似乎都无法修复该错误。

  Warning: validateDOMNesting(...): <tfoot> cannot appear as a child of <div>. 

实际上，还有第二个警告：

  Warning: validateDOMNesting(...): <td> cannot appear as a child of <tfoot>. 

.

            <TableContainer className={classes.scroll} >
                <Table stickyHeader aria-label="table">
                    <TableHead>
                        <TableRow>
                            <TableCell>Username</TableCell>
                            <TableCell align="right">First name</TableCell>
                            <TableCell align="right">Last name</TableCell>
                            <TableCell align="right">Email</TableCell>
                            <TableCell align="right">Connect_username</TableCell>
                            <TableCell align="right">Role</TableCell>
                            <TableCell align="left">Edit</TableCell>
                            <TableCell align="left">Delete</TableCell>
                        </TableRow>
                    </TableHead>

                    <TableBody>
                    {(rowsPerPage > 0
                        ? props?.user_items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                        : props?.user_items
                    ).map(item => (
                            <TableRow key={item.user_id}>
                                <TableCell component="th">{item.username}</TableCell>
                                <TableCell align="right">{item.first_name}</TableCell>
                                <TableCell align="right">{item.last_name}</TableCell>
                                <TableCell align="right">{item.email}</TableCell>
                                <TableCell align="right">{item.connect_username}</TableCell>
                                <TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
                                <TableCell>
                                    <Button onClick={() => props.handleEdit(item)}>Edit</Button>
                                </TableCell>
                                <TableCell>
                                    <Button onClick={() => props.handleConfirmDelete(item.user_id)}>Delete</Button>
                                </TableCell>
                            </TableRow>
                    ))}
                    </TableBody>
                </Table>
                <TableFooter>
                    <TablePagination
                        rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
                        count={props.user_items.length}
                        rowsPerPage={rowsPerPage}
                        page={page}
                        onPageChange={handleChangePage}
                        onRowsPerPageChange={handleChangeRowsPerPage}
                        />
                </TableFooter>
            </TableContainer>

标签： reactjsdatatablematerial-ui