getServerSideProps 函数不会向主组件发送数据

Question

我在自己的项目中使用 typescript 和 getServerSideProps，但似乎 getServerSideProps 不会将数据发送到主要组件。这是我使用的所有代码：

import Modal from "@/components/modal";
import React, { useState } from "react";
import Check from "../components/check";
import { setArayeshgahInfo } from "../redux/slice";
import { useDispatch, useSelector } from "react-redux";
import { useAppSelector, updatesetArayeshgahStatus } from "../redux/slice";
import { GetServerSideProps } from "next";

export interface IArayeshgah {
  id: string;
  title: string;
  check?: boolean | undefined;
}

function SelectArayeshgah(props: IArayeshgah[]) {
  const dispatch = useDispatch();
  console.log(props);
  React.useEffect(() => {
    //if (props.data) console.log("props ", props.data);
    //dispatch(setArayeshgahInfo(props));
  }, []);

  const arayeshgahInfos = useAppSelector((state) => state);

  const toggle_Arayeshgah_State = ({ id }: { id: string }) => {
    dispatch(updatesetArayeshgahStatus({ id }));
  };

  const ArayeshgahItems = () => {
    return (
      <div className="flex mt-4">
        {arayeshgahInfos?.map((item) => (
          <div
            className="w-52 rounded-xl shadow-sm bg-gray-300 border text-sm h-10 flex justify-between pr-2 pl-2 items-center"
            onClick={() => toggle_Arayeshgah_State({ id: item.id })}
          >
            <span>{item.title}</span>
            <Check isCheck={item.check!} size="sm" />
          </div>
        ))}
      </div>
    );
  };

  return (
    <Modal
      callback={() => {}}
      denyText="انصراف"
      headerText="انتخاب آرایشگاه"
      acceptText="تایید"
      bodyText="پس از انتخاب آرایشگاه مورد نظر بر روی دکمه تایید بزنید"
    >
      <ArayeshgahItems />
    </Modal>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  return { props: [{ id: "DKLGJDFKLHJDFLK", title: "تک چهره", check: false }] };
};

export default SelectArayeshgah;

我该如何解决问题？

尝试将数据从 getServerSideProps 函数发送到 SelectArayeshgah 函数

Answer 1

尝试制作

ArayeshgahItems

它自己的组件并传递所需的道具。下面的粗略示例

import Modal from "@/components/modal";
import React, { useState } from "react";
import Check from "../components/check";
import { setArayeshgahInfo } from "../redux/slice";
import { useDispatch, useSelector } from "react-redux";
import { useAppSelector, updatesetArayeshgahStatus } from "../redux/slice";
import { GetServerSideProps } from "next";

export interface IArayeshgah {
  id: string;
  title: string;
  check?: boolean | undefined;
}


function ArayeshgahItems({arayeshgahInfos}:{
    arayeshgahInfos: IArayeshgah[]
}) {
    return (
      <div className="flex mt-4">
        {arayeshgahInfos?.map((item) => (
          <div
            className="w-52 rounded-xl shadow-sm bg-gray-300 border text-sm h-10 flex justify-between pr-2 pl-2 items-center"
            onClick={() => toggle_Arayeshgah_State({ id: item.id })}
          >
            <span>{item.title}</span>
            <Check isCheck={item.check!} size="sm" />
          </div>
        ))}
      </div>
    );
  };

function SelectArayeshgah(props: IArayeshgah[]) {
  const dispatch = useDispatch();
  console.log(props);
  React.useEffect(() => {
    //if (props.data) console.log("props ", props.data);
    //dispatch(setArayeshgahInfo(props));
  }, []);

  const arayeshgahInfos = useAppSelector((state) => state);

  const toggle_Arayeshgah_State = ({ id }: { id: string }) => {
    dispatch(updatesetArayeshgahStatus({ id }));
  };


  return (
    <Modal
      callback={() => {}}
      denyText="انصراف"
      headerText="انتخاب آرایشگاه"
      acceptText="تایید"
      bodyText="پس از انتخاب آرایشگاه مورد نظر بر روی دکمه تایید بزنید"
    >
      <ArayeshgahItems arayeshgahInfos={arayeshgahInfos}/>
    </Modal>
  );
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  return { props: [{ id: "DKLGJDFKLHJDFLK", title: "تک چهره", check: false }] };
};

export default SelectArayeshgah;