将数据从 mongoDB 映射到 Mat UI DataGrid

Question

我正在尝试将后端查询的数据映射到前端 Material UI DataGrid 组件。我遇到了一个问题，我的页面加载了一会儿，它查询我的数据库，我可以看到它尝试呈现数据，但它进入了一个白页。我在控制台中没有看到任何错误，并且我的后端运行正常，并且已经使用 Material UI 的表进行了测试。以下是我的代码：

import React, { useEffect, useState, useMemo } from "react";
import { useNavigate } from "react-router-dom";

import { DataGrid } from "@mui/x-data-grid";

import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";

import IconButton from "@mui/material/IconButton";
import { AddCircleOutline } from "@mui/icons-material";

import { userCartsRounded } from "../../api/wowTeamRoutes";

function Rounding() {
  const [cartsRounded, setCartsRounded] = useState([]);

  let navigate = useNavigate();

  useEffect(() => {
    userCartsRounded()
      .then((response) => {
        setCartsRounded(response.data);
        console.log("test");
        console.log(cartsRounded);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const columns = [
    { field: "serialNum", headerName: "Cart Serial Number", width: 150 },
    { field: "pcNum", headerName: "Workstation Number", width: 150 },
    { field: "dateLastRounded", headerName: "Last Rounded On", width: 150 },
  ];

  const rows = useMemo(
    () => cartsRounded.map((row, index) => ({ ...row, id: row._id })),
    [cartsRounded]
  );

  return (
    <div>
      <IconButton
        color="primary"
        aria-label="new rounding"
        component="span"
        onClick={() => {
          navigate("add_new_cart");
        }}
      >
        <AddCircleOutline />
      </IconButton>
      <DataGrid
        component={Paper}
        rows={cartsRounded}
        getRowId={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
    </div>
  );
}

export default Rounding;

Answer 1

您不需要再次循环通过从 api 获得的数据。 试试这个：

function Rounding() {
  const [cartsRounded, setCartsRounded] = useState([]);

  let navigate = useNavigate();

  useEffect(() => {
    userCartsRounded()
      .then((response) => {
        setCartsRounded(response.data);
        console.log("test");
        console.log("test");
        console.log("test");
        console.log(cartsRounded);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  const columns = [
    { field: "serialNum", headerName: "Cart Serial Number", width: 150 },
    { field: "pcNum", headerName: "Workstation Number", width: 150 },
    { field: "dateLastRounded", headerName: "Last Rounded On", width: 150 },
  ];

  return (
    <div>
      <IconButton
        color="primary"
        aria-label="new rounding"
        component="span"
        onClick={() => {
          navigate("add_new_cart");
        }}
      >
        <AddCircleOutline />
      </IconButton>
      <DataGrid
        component={Paper}
        rows={cartsRounded}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={[5]}
      />
      {roundingModal && <AddRoundedCart />}
    </div>
  );
}