将props传递给子组件会在nextjs中产生RangeError

我是Next.js的新手。
我试图发送的props到子组件，这是一个响应从API调用。但当我试图添加的props在子组件它给我RangeError：最大调用堆栈大小超过。
这里是错误的截图

的数据

验证码如下：
page.jsx

import styles from './page.module.css';
import EmployeeDashboardNavbar from './serverComponents/EmployeeNavbar';
import EmployeeDashboardContent from './serverComponents/employeeDashboardContent';

const EmployeeDashboard = () => {
  return (
    <div className={styles["emp-dashboard-top"]}>
      <div className={styles["emp-dashboard-body"]}>
        <EmployeeDashboardNavbar />
        <EmployeeDashboardContent />
      </div>
    </div>
  );
};

export default EmployeeDashboard;

字符串

访问DashboardContent.jsx

import { findTaskswithDeptAdmin } from "@/actions/taskActions";
import EmpCards from "../clientComponents/employeeCard";
import styles from "./server.module.css";
import EmployeeCalendar from "../clientComponents/calendar";

const EmployeeDashboardContent = async () => {
  const tasksOfUser = await findTaskswithDeptAdmin({
    empId: "652a39fbfd78c72ec09f26b5",
  });
  const filteredTasks = tasksOfUser.filter((tk) => tk.completionStatus === "Assigned")
  console.log(filteredTasks);

  return (
    <>
      <div className={styles["emp-dash-main"]}>
        <div style={{ width: "100%", display: "flex" }}>
          <div className={styles["emp-dash-main-left"]}>
            <div>
              <div>
                <div className={styles["emp-header-nav"]}>
                  <div className={styles["emp-header"]}>
                    <h3>Krish</h3>
                  </div>
                </div>
                <EmpCards />
              </div>
              <div className={styles["emp-body"]}>
                <div className={styles["emp-meeting-schedule"]}>
                  <button className={styles["emp-dashboard-add-employee"]}>
                    Meeting Details
                  </button>
                </div>
                <div>
                  <table className={styles["emp-dash"]}>
                    <thead>
                      <tr className={styles["emp-table-head"]}>
                        <th>Task</th>
                        <th>Head</th>
                        <th>Department</th>
                        <th>Date</th>
                      </tr>
                    </thead>
                    <tbody>
                      {tasksOfUser
                        .filter((tk) => tk.completionStatus === "Assigned")
                        .map((task) => (
                          <tr
                            className={styles["emp-dashboard-table-data"]}
                            key={task._id}
                          >
                            <td>{task.taskName}</td>
                            <td>{task.deptId.name}</td>
                            <td>{task.adminId.adminName}</td>
                            <td>{task.deadline}</td>
                          </tr>
                        ))}
                    </tbody>
                  </table>
                </div>
                <EmployeeCalendar tasks={filteredTasks}/>
              </div>
            </div>
          </div>
          <div className={styles["emp-dash-main-right"]}>hiii</div>
        </div>
      </div>
    </>
  );
};

export default EmployeeDashboardContent;

型

电子日历.jsx

"use client";

import Calendar from "react-calendar";
import 'react-calendar/dist/Calendar.css';

import styles from "./client.module.css";

const EmployeeCalendar = ({tasks}) => {
  console.log(tasks)
  return (
    <>
      <div
        className={`${styles["emp-calender"]} ${styles["react-calender"]}`}
        style={{ display: "grid", placeItems: "center" }}
      >
        {/* <div>
          <h4 style={{ cursor: "pointer", color: "red" }}>Today</h4>
        </div> */}
        <Calendar />
      </div>
    </>
  );
};

export default EmployeeCalendar;

型
以下是filteredTasks的数据

[
  {
    taskName: 'task 3',
    adminId: {
      adminName: 'Krish',
      email: '[email protected]',
      password: '123',
      document: 'PAN',
      __v: 0
    },
    deptId: { name: 'HR', __v: 0 },
    deadline: '2023-10-21',
    status: false,
    completedDate: '',
    completionStatus: 'Assigned',
    createdAt: '2023-10-23T12:27:33.523Z',
    updatedAt: '2023-10-23T12:27:33.523Z',
    __v: 0
  }
]

型
我尝试过静态地发送响应，神奇的是它工作了。但是，我不知道为什么它在动态呈现的数据中不工作。

我得到了我的代码中的错误。我从findTaskswithDeptAdmin函数接收的数据没有转换成JSON，这就是为什么我得到了错误。
主要的问题是来自mongoose的数据不是字符串的形式，要通过props将数据从一个组件传递到另一个组件，数据必须是字符串类型。
作为参考，我将附上findTaskswithDeptAdmin函数的代码（我将分享代码，以前的函数代码，当我得到错误和错误解决后的函数代码。

findTaskswithDeptAdmin（）（当错误被词干化时）

export const findTaskswithDeptAdmin = async (query) => {
  try {
    const result = await Task.find(query);
    return result;
  } catch (error) {
    console.log(error);
    throw error;
  }
};

字符串

findTaskswithDeptAdmin（）（当错误被解决时）

export const findTaskswithDeptAdmin = async (query) => {
  try {
    const getTasks = async () => {
      const result = await Task.find(query);
      return result;
    };
    const actualData = await JSON.parse(JSON.stringify(await getTasks()));
    return actualData;
  } catch (error) {
    console.log(error);
    throw error;
  }
};

型

将props传递给子组件会在nextjs中产生RangeError

2条答案

相关问题

热门标签

最新问答