如何在 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

上下文state.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 页（电子邮件和 phone），最后是我想要的摘要所有领域。如何从下一页设置 shared_state？

step1.js 从“反应”导入反应；

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

export default Step1;

step2.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

您可以选择将数据保存在本地存储中，然后加载数据。

最好的解决方案是使用某种状态管理或上下文 API。您必须先在 _app 文件中创建一个 Provider，然后在每个文件中分别使用它们。

否则，您可以在一个页面上创建表单，而不是在他们移动步骤时将路由器推到一个新页面上，而是替换它，给人一种打开新页面的感觉。

Answer 2

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

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

您可以简单地在 _app.js 中创建一个状态并将该状态作为 prop 传递给您的表单页面，如下所示：

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 调用等等

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

How can I pass data in multi-step forms in NextJS?

state-management

reactjs

react-redux

next.js