我得到的错误

Grade.jsx:52 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at Grade.jsx:52:1
    at Array.map (<anonymous>)
    at Grade (Grade.jsx:39:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
(anonymous) @ Grade.jsx:52
Grade @ Grade.jsx:39
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react-dom.development.js:18687 The above error occurred in the <Grade> component:

    at Grade (http://localhost:3000/static/js/bundle.js:6687:56)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:277704:5)
    at Outlet (http://localhost:3000/static/js/bundle.js:278056:26)
    at div
    at StudentProfileLayout (http://localhost:3000/static/js/bundle.js:6946:72)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:277704:5)
    at Routes (http://localhost:3000/static/js/bundle.js:278141:5)
    at Routing
    at App (http://localhost:3000/static/js/bundle.js:349:78)
    at Router (http://localhost:3000/static/js/bundle.js:278079:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:276396:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

但是如果我在成绩比较呈现之前注解掉成绩列值，将不会有error.it将显示所有列，在此之后如果我取消注解它将正确显示成绩列值。但是没有注解掉成绩列的值，错误发生请我需要帮助，伙计们，帮助。服务器响应此值

ayne abreham alemayehu
new ObjectId("63efb168503e390f0b7c986a")
new ObjectId("63efb168503e390f0b7c986a")
[
  {
    gd: {
      _id: new ObjectId("63f16c7f03e5a86d748ab2c4"),
      batch: 1,
      department: 'None',
      stream: 'None',
      subject: 'b',
      class: new ObjectId("63efb168503e390f0b7c986a"),
      grades: [Array],
      createdAt: 2023-02-19T00:25:35.272Z,
      updatedAt: 2023-02-19T00:25:35.272Z,
      __v: 0
    },
    sem: 1
  },
  {
    gd: {
      _id: new ObjectId("63f16c8903e5a86d748ab2c9"),
      batch: 1,
      department: 'None',
      stream: 'None',
      subject: 'd',
      class: new ObjectId("63efb168503e390f0b7c986a"),
      grades: [Array],
      createdAt: 2023-02-19T00:25:45.106Z,
      updatedAt: 2023-02-19T00:25:45.106Z,
      __v: 0
    },
    sem: 1
    sem: 1
  }
    sem: 1
  }
]

所述路线

router.route("/find/grades").post(async (req, res) => {
  try {
    const { fullName } = req.body;
    const user = await User.findOne({ fullName });
    console.log(fullName);
    const grades = await Grade.find({
      department: user.department,
      stream: user.stream,
      batch: user.batch,
      "grades.studentId": user._id,
    });
    const updatedGrades = await Promise.all(
      grades.map(async (gd, i) => {
        console.log(gd.class);
        const sem = await Class.findById({ _id: gd.class });
        return { gd, sem: sem.semester };
      })
    );
    console.log(updatedGrades);
    res.json({ updatedGrades });
  } catch (err) {
    console.log(err);
  }
});

Grade.jsx

import { useState, useEffect, useContext } from "react";
import axios from "axios";
import { UserContext } from "../App.jsx";

function Grade() {
  const { state, dispatch } = useContext(UserContext);
  const [data, setData] = useState([{ gd: {}, sem: 1 }]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.post("http://localhost:5000/user/find/grades", {
          fullName: state.name,
        });
        const newData = res.data.updatedGrades.map((item) => ({ gd: item.gd, sem: item.sem }));
        console.log(newData);
        setData(newData);
      } catch (err) {
        console.log(err);
      }
    };
    fetchData();
  }, []);
console.log(data);
  return (
    <div className="w-full text-center">
      {console.log(data)}
      <table className="table-auto lg:table-fixed w-full">
        <thead>
          <tr className="bg-gray-800 text-white">
            <th className="lg:w-52 px-4 py-2">Batch</th>
            <th className="px-4 py-2">Department</th>
            <th className="px-4 py-2">Stream</th>
            <th className="px-4 py-2">Semester</th>
            <th className="px-4 py-2">Subject</th>
            <th className="px-4 py-2">Grade</th>
          </tr>
        </thead>
        <tbody>
          {data && data.length > 0 &&
            data.map((item, index) => (
              <tr key={index} className="text-gray-700">
                <td className="border px-2 py-px">{item.gd.batch}</td>
                <td className="text-center border px-0.5 py-px">
                  {item.gd.department}
                </td>
                <td className="border px-1.5 py-px">{item.gd.stream}</td>
                <td className="border px-2 py-px">{item.sem}</td>
                <td className="text-center border px-2 py-px">
                  {item.gd.subject}
                </td>
                <td className="text-center border px-2 py-px">
                  {item.gd?.grades[0]?.grade}
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}

export default Grade;