下一个或后退时，Material UI Stepper 不保持状态

Question

我有Material UI Stepper组件。我在 Buttonstepper上动态渲染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

您的代码的问题是，一旦您从步骤#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>
                })
            }
        </>
    );
}

这里的缺点是您确实需要在实际显示所有组件之前渲染它们。