Question

我有一个要填充API的语义UI表，我不知道为什么不填充

我尝试将行设置为变量而不是状态，我也查看了材料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
}

表组件

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 handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

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


  React.useEffect(() => {

    if(!user || !user.email) {
      const id = localStorage.getItem('id') || null;
      setState({id: id, rows: getPatientHistory(id)})
    }


  }, [])

  return (
    <Paper className={classes.root}>
      <TableContainer className={classes.container}>
        <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>
)}

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>
    )
}

MaterialUI表行未更新

1 个答案: