Material UI Stepper не сохраняет состояние при переходе вперед или назад

Question

У меня есть Material UI Stepper Компонент. Я рендеринг stepper динамически на кнопку ADD. Каждый шаг включает в себя некоторую форму, включая TextFields, SelctBox etc. Когда я заполняю форму на первом шаге и нажимаю кнопку «Далее», чтобы заполнить форму на следующем экране, и если я возвращаюсь на первом шаге, нажимая кнопку BACK Button, я теряю данные, заполненные на первом шаге.

Итак, вопрос в том, есть ли способ сохранить данные в Form Fields, пока мы меняем шаги?

Я пытался ниже, но не понимал, как сохранить состояние на родительском компоненте.

export default function FeaturesSteppers(props) {

.......
const [stepperState, setStepperState] = React.useState({});

const getStepContent = step => {
switch (step) {
  case 0:
    return <Profile 
      index={index} 
      form={form} 
      stepperState={stepperState}
      onUpdateStepperState={handleUpdateStepper}
    />;
  case 1:
    return "< Step1 />";
  case 2:
    return "< Step2 />";
  case 3:
      return "< Step3 />";
  default:
    return "Unknown step";
}
}

.........

const handleUpdateStepper = (data) => {
  console.log('INSIDE Handle Update')
  setStepperState(...)
};

Я не уверен, что мне возвращать с Profile.js и как использовать его на родительском компоненте.

Answer 1

Проблема с вашим кодом заключается в том, что после перехода go с шага № 0 к шагу № 1 компонент <Profile /> больше не существует, как и все его дочерние компоненты и их внутренние состояния. Вы можете сохранить внутреннее состояние в некотором глобальном состоянии / контексте, который перезагрузит контент, как только компонент снова попадет в DOM, но вместо этого вы можете просто визуализировать все шаги, но скрыть не относящиеся к делу:

const getStepContent = step => {

    const allSteps = [
        <Profile 
            index={index} 
            form={form} 
            stepperState={stepperState}
            onUpdateStepperState={handleUpdateStepper}
        />,
        <Step1 />,
        <Step2 />,
        <Step3 />
    ];

    return (
        <>
            {allSteps.map(
                (stepCmp, index) => {
                    return <div hidden={index !== step}>{stepCmp}</dv>
                })
            }
        </>
    );
}

Недостатком здесь является то, что вам нужно отрендерить все компоненты, прежде чем они будут отображены.