reactjs - 下一步或后退时，Material UI Stepper 不保持状态

Question

我有 Material UI Stepper 组件。我在 ADD 按钮上动态渲染 stepper。每个步骤都包含一些表单，包括 TextFields、SelctBox 等。 当我在第一步填写表单并单击 Next 以在下一个屏幕上填写表单时，如果我通过单击 BACK 按钮返回第一步 我丢失了第一步填写的数据。

所以问题是 - 在我们更改步骤时，有没有办法将数据保留在 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>
                })
            }
        </>
    );
}

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