带有材料 ui 的 ReactJS 表

Question

我正在尝试使用材质 UI 最小化的表格来创建仪表板https://material-ui.com/pt/components/tables/

我在过去 5 小时内遇到了一个问题。我可以成功地渲染数据库中的数据以显示在表格中。但是，当我使用 map 函数检索数据时，所有数据都显示在一行 x5 中。

图片：Front-end view

我试图在不同的行中显示名称和数据，而不是“Sue Flavio John Doe rajid”，因为每个都是不同的对象。

如果能帮助我理解我的逻辑错误在哪里，我将不胜感激。

function EmployeeList() {
  const [employeeList, setEmployeeList] = useState([]);

  console.log(employeeList);

  useEffect(() => {
    Axios.get("http://localhost:4000/vacations_cs_read").then((response) => {
      setEmployeeList(response.data);
    });
  }, []);

  const Row = () => {
    const [open, setOpen] = React.useState(false);
    const classes = useRowStyles();

    return (
      <React.Fragment>
        <TableRow className={classes.root}>
          <TableCell>
            <IconButton
              aria-label="expand row"
              size="small"
              onClick={() => setOpen(!open)}
            >
              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
            </IconButton>
          </TableCell>
          <TableCell component="th" scope="row">
            {employeeList.map((val, key) => {
              return <td>{val.employeeName}</td>;
            })}
          </TableCell>
          <TableCell align="left">
            {employeeList.map((val, key) => {
              const day = new Date(val.employeeStartDay).toLocaleDateString(
                "pt-BR"
              );
              return <td>{day}</td>;
            })}
          </TableCell>
          <TableCell align="left">
            <p>-</p>
          </TableCell>
          <TableCell align="left">
            <p>-</p>
          </TableCell>
          <TableCell align="left">
            <p>-</p>
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
            <Collapse in={open} timeout="auto" unmountOnExit>
              <Box margin={1}>
                <Typography variant="h6" gutterBottom component="div">
                  History
                </Typography>
                <Table size="small" aria-label="purchases">
                  <TableHead>
                    <TableRow>
                      <TableCell>From</TableCell>
                      <TableCell>To</TableCell>
                      <TableCell align="left">Days</TableCell>
                      <TableCell align="left">Paid</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {/* {row.history.map(() => (
                      <TableRow>
                        <TableCell component="th" scope="row"></TableCell>
                        <TableCell></TableCell>
                        <TableCell align="left"></TableCell>
                        <TableCell align="left"></TableCell>
                      </TableRow>
                    ))} */}
                  </TableBody>
                </Table>
              </Box>
            </Collapse>
          </TableCell>
        </TableRow>
      </React.Fragment>
    );
  };

  Row.propTypes = {
    row: PropTypes.shape({
      name: PropTypes.string,
      startDate: PropTypes.string,
      shift: PropTypes.string,
      daysReceived: PropTypes.number,
      daysUsed: PropTypes.number,
      daysLeft: PropTypes.number,
      history: PropTypes.arrayOf(
        PropTypes.shape({
          amount: PropTypes.number,
          customerId: PropTypes.string,
          date: PropTypes.string,
        })
      ),
    }),
  };

  return (
    <div>
      <TableContainer component={Paper}>
        <Table aria-label="collapsible table">
          <TableHead>
            <TableRow>
              <TableCell />
              <TableCell>Name</TableCell>
              <TableCell align="left">Employment Date</TableCell>
              <TableCell align="left">Days received</TableCell>
              <TableCell align="left">Days used</TableCell>
              <TableCell align="left">Days left</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {employeeList.map((val, key) => (
              <Row />
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

Answer 1

好吧，您没有将数据提供给迭代员工的 map 调用中的每一行。然后，您在每个单元格中再次迭代整个事情..

这应该可行：

const Row = ({val}) => {
  const [open, setOpen] = React.useState(false);
  const classes = useRowStyles();
  
  return (
    <React.Fragment>
      <TableRow className={classes.root}>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {val.employeeName}
        </TableCell>
        <TableCell align="left">
          {(new Date(val.employeeStartDay)).toLocaleDateString("pt-BR")}
        </TableCell>
        <TableCell align="left">
          <p>-</p>
        </TableCell>
        <TableCell align="left">
          <p>-</p>
        </TableCell>
        <TableCell align="left">
          <p>-</p>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box margin={1}>
              <Typography variant="h6" gutterBottom component="div">
                History
              </Typography>
              <Table size="small" aria-label="purchases">
                <TableHead>
                  <TableRow>
                    <TableCell>From</TableCell>
                    <TableCell>To</TableCell>
                    <TableCell align="left">Days</TableCell>
                    <TableCell align="left">Paid</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {/* {row.history.map(() => (
                      <TableRow>
                      <TableCell component="th" scope="row"></TableCell>
                      <TableCell></TableCell>
                      <TableCell align="left"></TableCell>
                      <TableCell align="left"></TableCell>
                      </TableRow>
                    ))} */}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
};

Row.propTypes = {
  row: PropTypes.shape({
    name: PropTypes.string,
    startDate: PropTypes.string,
    shift: PropTypes.string,
    daysReceived: PropTypes.number,
    daysUsed: PropTypes.number,
    daysLeft: PropTypes.number,
    history: PropTypes.arrayOf(
      PropTypes.shape({
        amount: PropTypes.number,
        customerId: PropTypes.string,
        date: PropTypes.string,
      })
    ),
  }),
};

return (
  <div>
    <TableContainer component={Paper}>
      <Table aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>Name</TableCell>
            <TableCell align="left">Employment Date</TableCell>
            <TableCell align="left">Days received</TableCell>
            <TableCell align="left">Days used</TableCell>
            <TableCell align="left">Days left</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {employeeList.map((val, key) => <Row val={val} key={key}/>)}
        </TableBody>
      </Table>
    </TableContainer>
  </div>
);

Answer 2

你应该使用的结构应该是这样的：

function Row(props) {
   // you can access the employee object as `props.employee`
   ...
}

...

{employeeList.map((val, key) => <Row key={key} employee={val} />}

每次调用 row 函数时，它都会为您提供一个新行。要让它知道该行中应该包含哪些数据，您应该将该数据作为道具传递，而不是使用状态。因此，数据流将是 render 方法有一个员工列表，并且它对每个员工调用一次行构建器函数，这会返回一个要渲染的行列表。