材质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() {&nbsp; &nbsp; // const classes = useStyles();&nbsp; &nbsp; // const [user, setUser] = useContext(AuthContext);&nbsp; &nbsp; const [state, setState] = useState({id: null, rows: []});&nbsp; &nbsp; const [page, setPage] = useState(0);&nbsp; &nbsp; const [rows, setRows] = useState([]);&nbsp; &nbsp; const [rowsPerPage, setRowsPerPage] = useState(10);&nbsp; &nbsp; const data = [&nbsp; &nbsp; &nbsp; &nbsp; {id: 1, code: 1, specialization: 'ABC', case_name: 'X-Ray', case_description: 'This is detail'},&nbsp; &nbsp; &nbsp; &nbsp; {id: 2, code: 2, specialization: 'XYZ', case_name: 'MRI', case_description: 'This is detail'},&nbsp; &nbsp; &nbsp; &nbsp; {id: 3, code: 3, specialization: 'PQR', case_name: 'Urine', case_description: 'This is detail'}&nbsp; &nbsp; &nbsp; &nbsp; ];&nbsp; &nbsp; const columns = [&nbsp; &nbsp; &nbsp; &nbsp; {id: 'id', label: 'Case ID', minWidth: 170},&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 'specialization',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Case Type',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minWidth: 100,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: (value) => value.toLocaleString('en-US'),&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 'case_name',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Diagnoses',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minWidth: 170,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align: 'right',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: (value) => value.toLocaleString('en-US'),&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: 'case_description',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: 'Doctor comments',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minWidth: 170,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align: 'right',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; format: (value) => value.toLocaleString('en-US'),&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ];&nbsp; &nbsp; const handleChangePage = (event, newPage) => {&nbsp; &nbsp; &nbsp; &nbsp; setPage(newPage);&nbsp; &nbsp; };&nbsp; &nbsp; const handleChangeRowsPerPage = (event) => {&nbsp; &nbsp; &nbsp; &nbsp; setRowsPerPage(+event.target.value);&nbsp; &nbsp; &nbsp; &nbsp; setPage(0);&nbsp; &nbsp; };&nbsp; &nbsp; function getPatientHistory(id) {&nbsp; &nbsp; &nbsp; &nbsp; return data;&nbsp; &nbsp; }&nbsp; &nbsp; React.useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; // if (!user || !user.email) {&nbsp; &nbsp; &nbsp; &nbsp; const id = localStorage.getItem('id') || null;&nbsp; &nbsp; &nbsp; &nbsp; setState({id: id, rows: getPatientHistory(id)})&nbsp; &nbsp; &nbsp; &nbsp; // }&nbsp; &nbsp; }, []);&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <Paper>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableContainer>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Table stickyHeader aria-label="sticky table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableHead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {columns.map((column, i) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align={column.align}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; style={{minWidth: column.minWidth}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {column.label}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableHead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {state.rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {columns.map((column) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const value = row[column.id];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell key={column.id} align={column.align}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {column.format && typeof value === 'number' ? column.format(value) : value}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableContainer>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TablePagination&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rowsPerPageOptions={[10, 25, 100]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component="div"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count={state.rows.length}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rowsPerPage={rowsPerPage}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; page={page}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChangePage={handleChangePage}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChangeRowsPerPage={handleChangeRowsPerPage}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; </Paper>&nbsp; &nbsp; )}