I am trying to map data that is queried by my backend to my front end Material UI DataGrid component. I am running into an issue where my page loads for a moment, it queries my database, and I can see it try to render the data, but it goes to a white page. I don't see any error in my console and my back end is performing as it should and has been tested with Material UI's table. Below is my code:

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;

CodePudding user response：

You don't need to loop again through the data you get from the api. Try this:

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