如何在 NextJS 中以多步骤形式传递数据？

Question

我最近开始使用 NextJS 和 React。

我正在尝试在我的应用程序中实现多页面表单，但我不知道如何保留并将表单数据从一个页面传递到另一页面。

关于使用状态管理库和上下文 API 有很多指南，但它们要么在 ReactJS 中，要么定义了不同组件之间的使用。

我的 _app.js 看起来像这样：

const AppComponent = ({ Component, pageProps, currentUser }) => {
  return (
    <div>
      <AppWrapper>
        <Header currentUser={currentUser} />
        <Component {...pageProps} />
      </AppWrapper>
    </div>
  );
};
AppComponent.getInitialProps = async (appContext) => {
  const client = buildClient(appContext.ctx);

  const { data } = await client.get('/api/client/currentuser');
  let pageProps = {};
  if (appContext.Component.getInitialProps) {
    pageProps = await appContext.Component.getInitialProps(appContext.ctx);
  }
  return {
    pageProps,
    ...data,
  };
};

export default AppComponent

上下文状态.js

import { createContext, useContext } from 'react';

const AppContext = createContext();

export function AppWrapper({ children }) {
  let sharedState = {
    /* whatever you want */
  };

  return (
    <AppContext.Provider value={sharedState}>{children}</AppContext.Provider>
  );
}

export function useAppContext() {
  return useContext(AppContext);
}

现在我需要保存第 1 页上的表单数据（姓名）并将其传递到第 2 页（电子邮件和电话），最后是我想要包含所有字段的摘要。如何从以下页面设置shared_state？

step1.js 从“react”导入React；

function Step1(props) {
  return (
    <div>
      <p>Name: <input name="name" /></p>
      <p>Surname: <input name="surname" /></p>
    </div>
  );
}

export default Step1;

步骤2.js

import React from "react";

export default function Step2(props) {
  return (
    <div>
      <p>Email: <input name="email" /></p>
      <p>Phone: <input name="Phone" /></p>
    </div>
  );

如何从步骤 1 中的用户数据设置状态并将数据传递到步骤 2。谁能帮我解决这个问题吗？

Answer 1

在 React 中工作的所有与状态相关的内容都将在 Next.js 中工作，将其视为_app.js父组件，并将每个页面视为其子组件。

React Context 也可以工作，但是如果您想通过大型组件层次结构将状态从父级传递到子级，那么它会很有用。在这里，您只有您_app.js和 2 个直系子级，即您的 2 个表格页面。

您可以简单地创建一个状态_app.js并将该状态作为属性传递到表单页面，如下所示：

import { useState } from "react"

const AppComponent = ({ Component, pageProps, currentUser }) => {
  const [formData, setFormData] = useState({});
  const updateFormData = (newData) => {
    setFormData({ ...formData, ...newData });
  };
  return <Component {...pageProps} updateFormData={updateFormData} />;
};

function Step1({ updateFormData }) {
  const handleNameChange = (event) => {
    updateFormData({ name: event.target.value });
  };
  const handleSurnameChange = (event) => {
    updateFormData({ surname: event.target.value });
  };
  return (
    <div>
      <p>
        Name: <input name="name" onChange={handleNameChange} />
      </p>
      <p>
        Surname: <input name="surname" onChange={handleSurnameChange} />
      </p>
    </div>
  );
}

通过在第二个表单页面中执行相同的操作，您将在formData变量中包含所有表单数据，您可以将其传递到另一个页面以显示结果、执行 API 调用等。