React页面间数据传递及状态整合至对象避免无限循环问题

问题根源 #

• 你同时维护了单个字段的state和整合后的formData对象，双重状态需要同步，既增加复杂度又容易出错
• 之前尝试在page===3的渲染分支里调用setAll()，每次组件渲染都会执行这个函数，而setFormData会触发组件重渲染，重渲染后又会再次进入该分支执行setAll()，直接形成无限循环
• 另外你在setAll()里打印formData看不到最新值，因为React的setState是异步操作，打印语句会先于状态更新执行

最优解决方案：用单一formData对象统一管理所有状态 #

完全没必要单独声明每个字段的state，直接用formData统一管理所有表单数据，子组件更新时直接修改对象对应字段，既省去状态同步的麻烦，也从根源避免无限循环。

具体修改步骤 #

1. 移除冗余的单个字段state：删掉所有email、firstName这类单独的state，只保留formData
2. 新增通用字段更新函数：写一个函数统一处理表单字段的更新，确保基于最新状态修改
3. 修改子组件传参：给子组件传递formData里的对应字段，以及更新函数
4. 直接使用formData提交：进入成功页时，formData已经是完整的表单数据，直接拿来发起API请求即可

修改后的完整代码 #

import React, { useState } from 'react';
import Signup1 from '../pages/Signup/steps/Signup1';
import Signup2 from '../pages/Signup/steps/Signup2';
import Signup3 from '../pages/Signup/steps/Signup3';

function Forms() {
  const [alert, setAlert] = useState();
  const [page, setPage] = useState(0);
  const [formData, setFormData] = useState({
    email: "",
    FirstName: "",
    LastName: "",
    CountryNumber: "",
    Number: "",
    JobTitle: "",
    People: "",
    Company: "",
    TaxID: ""
  });

  // 通用更新函数，子组件直接调用修改对应字段
  const updateFormField = (fieldName, value) => {
    setFormData(prev => ({
      ...prev,
      [fieldName]: value
    }));
  };

  const PageDisplay = () => {
    switch (page) {
      case 0:
        return (
          <Signup1
            email={formData.email}
            setEmail={(value) => updateFormField('email', value)}
            setPage={setPage}
          />
        );
      case 1:
        return (
          <Signup2
            firstName={formData.FirstName}
            setFirstName={(value) => updateFormField('FirstName', value)}
            lastName={formData.LastName}
            setLastName={(value) => updateFormField('LastName', value)}
            countryNumber={formData.CountryNumber}
            setCountryNumber={(value) => updateFormField('CountryNumber', value)}
            number={formData.Number}
            setNumber={(value) => updateFormField('Number', value)}
            jobTitle={formData.JobTitle}
            setJobTitle={(value) => updateFormField('JobTitle', value)}
            setPage={setPage}
          />
        );
      case 2:
        return (
          <Signup3
            people={formData.People}
            setPeople={(value) => updateFormField('People', value)}
            company={formData.Company}
            setCompany={(value) => updateFormField('Company', value)}
            taxID={formData.TaxID}
            setTaxID={(value) => updateFormField('TaxID', value)}
            setPage={setPage}
          />
        );
      case 3:
        // 直接用formData发起API请求
        console.log('待提交的表单数据:', formData);
        // 示例：fetch('/api/signup', { method: 'POST', body: JSON.stringify(formData) })
        return <div>success</div>;
      default:
        return null;
    }
  };

  return (
    <div className='Forms'>
      {PageDisplay()}
    </div>
  );
}

export default Forms;

额外说明 #

• 使用函数式更新setFormData(prev => {...})，确保每次修改都是基于最新的状态，避免异步更新导致的状态覆盖问题
• 子组件不需要关心父组件的状态结构，只需要调用传递过来的更新函数即可修改对应字段
• 进入成功页时无需额外同步操作，formData已经是完整数据，彻底避免了之前的无限循环问题

内容的提问来源于stack exchange，提问作者André Dettmer