我如何在NextJS的多步骤形式传递数据?

Question

我最近开始使用NextJS和React。

我试图在我的应用程序中实现多页表单，但我不知道如何才能坚持并将表单数据从一个页面传递到另一个页面。

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

我的_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页(电子邮件和电话)，最后是一个总结，我想有所有的字段。如何从下面的页面设置shared_state ?

step1.jsimport React from " React "

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>
);

如何从step1中的用户数据设置状态并将数据传递给step2 ?有人能帮我一下吗?

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

Answer 2

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

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

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