材质UI 表行未折叠

Question

我有一个语义UI表，我试图用API填充，我不知道为什么它没有填充我尝试使行成为变量而不是状态，我还查看了材料UI表文档，但我不确定为什么行没有呈现API 工作正常并返回正确的数据列const columns = [  { id: 'id', label: 'Case ID', minWidth: 170 },  {     id: 'specialization',     label: 'Case Type',      minWidth: 100,       format: (value) => value.toLocaleString('en-US'),  },  {    id: 'case_name',    label: 'Diagnoses',    minWidth: 170,    align: 'right',    format: (value) => value.toLocaleString('en-US'),  },  {    id: 'case_description',    label: 'Doctor comments',    minWidth: 170,    align: 'right',    format: (value) => value.toLocaleString('en-US'),  },];从 API 填充行function getPatientHistory(id){  const rows = []  if(! id) return rows  console.log(id, "IN!!")  fetch(`/api/list-patient-cases/${id}/`)  .then(res => res.json())  .then(data => {    data.forEach( Case => {      let {id, specialization, case_name, case_description} = Case;      case_description = case_description || 'Wating';      rows.push( {id, specialization, case_name, case_description})    })  })  console.log(rows)  return rows}

Answer 1

请检查此工作示例：

import TablePagination from "@material-ui/core/TablePagination";

import TableCell from "@material-ui/core/TableCell";

import TableRow from "@material-ui/core/TableRow";

import TableBody from "@material-ui/core/TableBody";

import Paper from "@material-ui/core/Paper";

import TableContainer from "@material-ui/core/TableContainer";

import Table from "@material-ui/core/Table";

import TableHead from "@material-ui/core/TableHead";

import React, {useState} from "react";

export default function Patient() {

    // const classes = useStyles();

    // const [user, setUser] = useContext(AuthContext);

    const [state, setState] = useState({id: null, rows: []});

    const [page, setPage] = useState(0);

    const [rows, setRows] = useState([]);

    const [rowsPerPage, setRowsPerPage] = useState(10);

    const data = [

        {id: 1, code: 1, specialization: 'ABC', case_name: 'X-Ray', case_description: 'This is detail'},

        {id: 2, code: 2, specialization: 'XYZ', case_name: 'MRI', case_description: 'This is detail'},

        {id: 3, code: 3, specialization: 'PQR', case_name: 'Urine', case_description: 'This is detail'}

        ];

    const columns = [

        {id: 'id', label: 'Case ID', minWidth: 170},

        {

            id: 'specialization',

            label: 'Case Type',

            minWidth: 100,

            format: (value) => value.toLocaleString('en-US'),

        },

        {

            id: 'case_name',

            label: 'Diagnoses',

            minWidth: 170,

            align: 'right',

            format: (value) => value.toLocaleString('en-US'),

        },

        {

            id: 'case_description',

            label: 'Doctor comments',

            minWidth: 170,

            align: 'right',

            format: (value) => value.toLocaleString('en-US'),

        },

    ];

    const handleChangePage = (event, newPage) => {

        setPage(newPage);

    };

    const handleChangeRowsPerPage = (event) => {

        setRowsPerPage(+event.target.value);

        setPage(0);

    };

    function getPatientHistory(id) {

        return data;

    }

    React.useEffect(() => {

        // if (!user || !user.email) {

        const id = localStorage.getItem('id') || null;

        setState({id: id, rows: getPatientHistory(id)})

        // }

    }, []);

    return (

        <Paper>

            <TableContainer>

                <Table stickyHeader aria-label="sticky table">

                    <TableHead>

                        <TableRow>

                            {columns.map((column, i) => (

                                <TableCell

                                    key={i}

                                    align={column.align}

                                    style={{minWidth: column.minWidth}}

                                >

                                    {column.label}

                                </TableCell>

                            ))}

                        </TableRow>

                    </TableHead>

                    <TableBody>

                        {state.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {

                            return (

                                <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>

                                    {columns.map((column) => {

                                        const value = row[column.id];

                                        return (

                                            <TableCell key={column.id} align={column.align}>

                                                {column.format && typeof value === 'number' ? column.format(value) : value}

                                            </TableCell>

                                        );

                                    })}

                                </TableRow>

                            );

                        })}

                    </TableBody>

                </Table>

            </TableContainer>

            <TablePagination

                rowsPerPageOptions={[10, 25, 100]}

                component="div"

                count={state.rows.length}

                rowsPerPage={rowsPerPage}

                page={page}

                onChangePage={handleChangePage}

                onChangeRowsPerPage={handleChangeRowsPerPage}

            />

        </Paper>

    )

}