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

Posted 2023-02-22

【中文标题】如何在 NextJS 中以多步形式传递数据？

【英文标题】：How can I pass data in multi-step forms in 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。 谁能帮我解决这个问题？

【参考方案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 调用等。