React应用中动态组件RegisterWindow切换步骤时如何保留Category状态？

嘿，这个问题在多步骤表单开发里太常见了！核心原因是你切换步骤时，Category.js大概率被卸载后重新挂载了——组件一卸载，内部维护的状态自然就跟着丢失了。下面是几种最实用的解决方案，按推荐优先级排序：

1. 状态提升到父组件（最推荐） #

这是最符合React设计理念的方案：把Category.js里需要保留的状态（比如选中的票数），迁移到父组件RegisterWindow.js中，再通过props传递给子组件。这样不管子组件是否被卸载，状态都稳稳存在父组件里，切换步骤时绝不会丢失。

举个简单的代码示例：
父组件RegisterWindow.js：

import { useState } from 'react';
import ProgressBar from './ProgressBar';
import Category from './Category';
import Attendees from './Attendees';

const RegisterWindow = () => {
  const [currentStep, setCurrentStep] = useState(1);
  // 把需要跨步骤保留的状态放在父组件
  const [selectedTickets, setSelectedTickets] = useState(0);

  return (
    <div className="register-window">
      <ProgressBar 
        currentStep={currentStep}
        onStepChange={setCurrentStep}
      />
      
      {currentStep === 1 && (
        <Category 
          selectedTickets={selectedTickets}
          onTicketSelect={setSelectedTickets}
        />
      )}
      
      {currentStep === 2 && (
        <Attendees />
      )}
    </div>
  );
};

export default RegisterWindow;

子组件Category.js：

const Category = ({ selectedTickets, onTicketSelect }) => {
  // 不再自己维护状态，直接使用父组件传递的props
  return (
    <div className="ticket-selection">
      <button onClick={() => onTicketSelect(2)}>选择2张票</button>
      <p>已选票数：{selectedTickets}张</p>
    </div>
  );
};

export default Category;

这种方案逻辑清晰，维护成本低，是多步骤表单的首选。

2. 使用React Context（适合复杂表单场景） #

如果你的表单层级较深，或者多个子组件都需要共享这些状态，状态提升可能会导致props层层传递（也就是常说的"prop drilling"）。这时用React Context来统一管理表单状态会更高效。

先创建一个表单上下文：

import { createContext, useContext, useState } from 'react';

const FormContext = createContext();

export const FormProvider = ({ children }) => {
  const [formState, setFormState] = useState({
    selectedTickets: 0,
    // 可以在这里添加其他需要跨步骤保存的字段
    attendeeCount: 0
  });

  const updateFormState = (key, value) => {
    setFormState(prev => ({ ...prev, [key]: value }));
  };

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

export const useFormContext = () => useContext(FormContext);

然后在RegisterWindow外层包裹FormProvider：

import { FormProvider } from './FormContext';
import RegisterWindow from './RegisterWindow';

const App = () => {
  return (
    <FormProvider>
      <RegisterWindow />
    </FormProvider>
  );
};

最后在Category.js中使用上下文：

import { useFormContext } from './FormContext';

const Category = () => {
  const { formState, updateFormState } = useFormContext();
  const { selectedTickets } = formState;

  return (
    <div className="ticket-selection">
      <button onClick={() => updateFormState('selectedTickets', 2)}>选择2张票</button>
      <p>已选票数：{selectedTickets}张</p>
    </div>
  );
};

3. 保留组件挂载（不卸载） #

如果不想修改现有的状态结构，也可以让所有步骤组件始终保持挂载，只是通过CSS控制显示/隐藏。这样组件的内部状态就不会因为卸载而丢失。

修改RegisterWindow.js：

const RegisterWindow = () => {
  const [currentStep, setCurrentStep] = useState(1);

  return (
    <div className="register-window">
      <ProgressBar 
        currentStep={currentStep}
        onStepChange={setCurrentStep}
      />
      
      {/* 用CSS控制显示隐藏，组件始终挂载 */}
      <div className={`step-content ${currentStep === 1 ? 'active' : 'hidden'}`}>
        <Category />
      </div>
      
      <div className={`step-content ${currentStep === 2 ? 'active' : 'hidden'}`}>
        <Attendees />
      </div>
    </div>
  );
};

对应的CSS：

.step-content.hidden {
  display: none;
}
.step-content.active {
  display: block;
}

注意：这种方式会让所有步骤组件一直存在于DOM中，可能占用更多内存，适合简单表单。如果组件有副作用（比如useEffect发起请求），需要额外处理避免不必要的执行。

4. 使用本地存储（实现状态持久化） #

如果需要刷新页面后状态也不丢失，可以结合localStorage或sessionStorage。在状态变化时保存到本地，组件挂载时再读取。

修改Category.js：

import { useState, useEffect } from 'react';

const Category = () => {
  // 组件挂载时从localStorage读取初始值
  const [selectedTickets, setSelectedTickets] = useState(() => {
    return Number(localStorage.getItem('selectedTickets')) || 0;
  });

  // 状态变化时同步保存到localStorage
  useEffect(() => {
    localStorage.setItem('selectedTickets', selectedTickets);
  }, [selectedTickets]);

  return (
    <div className="ticket-selection">
      <button onClick={() => setSelectedTickets(2)}>选择2张票</button>
      <p>已选票数：{selectedTickets}张</p>
    </div>
  );
};

这种方案适合需要跨会话保存状态的场景，但要注意定期清理本地存储的数据，避免冗余。

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