Nextjs getServerSideProps 未传递更新的道具

Question

我面临的挑战是在 nextjs 页面中getServerSideProps没有传递更新的道具。

我的页面结构如下

|-pages
 |-notifications
  |-emails
   |-index.tsx
   |-activate.tsx

在页面pages/notifications/emails/index.tsx中， getServerSideProps会从 API 感染与用户相关的所有电子邮件，并按如下方式填充页面的道具：

type Props = {
  emails: Array<RecordEmail>;
  error?: string;
};

const Notifications = ({ emails: initialEmails, error }: Props) => {
  const [emails, setEmails] = useState<Array<RecordEmail>>(initialEmails);
  return (
   <div className="mt-4 flex flex-col space-y-2">
          <pre className="bg-gray-100 p-2 font-gtpressuratibold text-xs">
            <code>{JSON.stringify(emails, undefined, 2)}</code>
          </pre>
          <pre className="bg-gray-100 p-2 font-gtpressuratibold text-xs">
            <code>{JSON.stringify(initialEmails, undefined, 2)}</code>
          </pre>
        </div>
  )
}

export const getServerSideProps: GetServerSideProps<Props> = async (
  context
) => {
  context.res.setHeader(
    "Cache-Control",
    "private, s-maxage=1, stale-while-revalidate=1"
  );
  const session = await unstable_getServerSession(
    context.req,
    context.res,
    authOptions
  );

  try {
    const result = await FETCHDATA(with session token)
    
    const emails: Array<RecordEmail> = [];

    result.items.forEach((a) => {
      if (typeof a["email"] !== "undefined") {
        const r: RecordEmail = {
          id: a.id,
          email: a["email"],
          primary: a["primary"],
          valid: a["valid"],
        };
        emails.push(r);
      }
    });
    console.log("Emails getServerSideProps - emails: ", emails);
    return {
      props: {
        emails: [...emails],
      },
    };
  } catch (err: any) {
    console.error(err);
    return {
      props: {
        emails: [],
        error: (err as Error).message,
      },
    };
  }
};

export default Notifications;

在页面pages/notifications/emails/activate.tsx上，用户输入激活码来激活 email。 提交代码后，email 被激活。 这可以在 DB 和 API 中看到。 通过单击<Link> ，用户导航到页面pages/notifications/emails/index.tsx以查看所有电子邮件。

通过导航到页面pages/notifications/emails/index.tsx ， getServerSideProps会正确请求新数据。 console.log("Emails getServerSideProps - emails: ", emails); 记录更新的数据。 但是页面仍然显示旧数据（提交激活码之前的数据）。

有谁知道为什么更新道具没有正确传递到页面？

附加问题：在页面pages/notifications/emails/activate.tsx我没有使用getServerSideProps 。 但是，通过导航此页面（通过<Link>或完成新的刷新）从页面pages/notifications/emails/index.tsx调用getServerSideProps 。 这是设计使然吗？

谢谢你的帮助！

更新：完全刷新页面或通过<Link>导航到另一个页面然后返回正确传递数据后。

Answer 1

问题

当您的初始电子邮件更改时，您的initialEmails不会改变

const [emails, setEmails] = useState<Array<RecordEmail>>(initialEmails);

解决方案

卸下 state。 道具不应存储在 state 中。