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

【问题标题】：How can I pass data in multi-step forms in NextJS?如何在 NextJS 中以多步形式传递数据？
【发布时间】：2021-05-21 20:19:17
【问题描述】：

我最近开始使用 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 从“反应”导入反应；

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。谁能帮我解决这个问题？

【问题讨论】：

标签： reactjs react-redux next.js state-management

【解决方案1】：

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

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

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

【讨论】：

我已经更新了我的问题。你能解释一下如何从 step1.js 设置共享状态并在 step2.js 中使用它吗？

【解决方案2】：

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

【讨论】：