ReactJS多页面输入数据汇总至最后一页的实现技术咨询

1. 状态提升（最基础直接的方案） #

把所有表单数据的状态统一放在所有页面的共同父组件中，每个输入页面通过props接收更新状态的方法，提交时更新父组件的状态，最后一页直接从父组件获取汇总数据展示。

示例代码：

// 父组件
import { useState } from 'react';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
import SummaryPage from './SummaryPage';

function FormContainer() {
  const [formData, setFormData] = useState({
    page1: {},
    page2: {},
    page3: {}
  });

  // 接收子页面提交的数据，更新对应页面的字段
  const handlePageSubmit = (pageKey, data) => {
    setFormData(prev => ({
      ...prev,
      [pageKey]: data
    }));
  };

  return (
    <div>
      {/* 根据路由或步骤切换页面，这里简化展示 */}
      <Page1 onSubmit={(data) => handlePageSubmit('page1', data)} />
      <Page2 onSubmit={(data) => handlePageSubmit('page2', data)} />
      <Page3 onSubmit={(data) => handlePageSubmit('page3', data)} />
      <SummaryPage data={formData} />
    </div>
  );
}

// 子页面示例（Page1）
function Page1({ onSubmit }) {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ name });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">提交第一页</button>
    </form>
  );
}

// 汇总页面（SummaryPage）
function SummaryPage({ data }) {
  return (
    <div>
      <h2>汇总信息</h2>
      <p>第一页姓名：{data.page1.name}</p>
      <p>第二页数据：{JSON.stringify(data.page2)}</p>
      <p>第三页数据：{JSON.stringify(data.page3)}</p>
    </div>
  );
}

适用场景：页面层级不深、表单逻辑简单的情况，是React官方推荐的状态共享方式。

2. Context API（适合多层级页面） #

如果你的页面嵌套层级比较深，用状态提升需要层层传递props太繁琐，可以用React的Context API来全局共享表单数据，各个页面直接从Context中获取更新方法和数据。

示例代码：

// 创建FormContext
import { createContext, useContext, useState } from 'react';

const FormContext = createContext();

// 提供Context的组件
export function FormProvider({ children }) {
  const [formData, setFormData] = useState({
    page1: {},
    page2: {},
    page3: {}
  });

  const updateFormData = (pageKey, data) => {
    setFormData(prev => ({
      ...prev,
      [pageKey]: data
    }));
  };

  return (
    <FormContext.Provider value={{ formData, updateFormData }}>
      {children}
    </FormContext.Provider>
  );
}

// 自定义Hook方便获取Context
export function useFormContext() {
  return useContext(FormContext);
}

// 子页面使用（Page1）
function Page1() {
  const { updateFormData } = useFormContext();
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    updateFormData('page1', { name });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">提交第一页</button>
    </form>
  );
}

// 汇总页面使用
function SummaryPage() {
  const { formData } = useFormContext();
  return (
    <div>
      <h2>汇总信息</h2>
      <p>第一页姓名：{formData.page1.name}</p>
      <p>第二页数据：{JSON.stringify(formData.page2)}</p>
      <p>第三页数据：{JSON.stringify(formData.page3)}</p>
    </div>
  );
}

// 根组件包裹
function App() {
  return (
    <FormProvider>
      {/* 路由或步骤组件 */}
      <Page1 />
      <Page2 />
      <Page3 />
      <SummaryPage />
    </FormProvider>
  );
}

适用场景：页面嵌套深、需要跨组件共享数据的情况，避免"props drilling"问题。

3. useReducer（复杂表单逻辑） #

如果你的表单有很多字段，或者状态更新逻辑比较复杂（比如需要校验、多字段联动），可以用useReducer来管理状态，把所有更新逻辑集中在reducer函数里，代码更易维护。

示例代码：

import { useReducer } from 'react';

// 定义reducer函数
function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PAGE1':
      return { ...state, page1: action.payload };
    case 'UPDATE_PAGE2':
      return { ...state, page2: action.payload };
    case 'UPDATE_PAGE3':
      return { ...state, page3: action.payload };
    default:
      return state;
  }
}

// 父组件使用useReducer
function FormContainer() {
  const [formData, dispatch] = useReducer(formReducer, {
    page1: {},
    page2: {},
    page3: {}
  });

  return (
    <div>
      <Page1 onSubmit={(data) => dispatch({ type: 'UPDATE_PAGE1', payload: data })} />
      <Page2 onSubmit={(data) => dispatch({ type: 'UPDATE_PAGE2', payload: data })} />
      <Page3 onSubmit={(data) => dispatch({ type: 'UPDATE_PAGE3', payload: data })} />
      <SummaryPage data={formData} />
    </div>
  );
}

适用场景：表单逻辑复杂、状态更新规则多的情况，相比useState更适合处理复杂状态。

内容的提问来源于stack exchange，提问作者Hazal Kaya