重新挂载组件设置状态操作

Question

我有这些组件层次结构：

新详情>信息>发送Otp

在 NewDetail 中，我有用于渲染组件的 ConditionalRendering（如 Information）：

const SelectServices = dynamic(() => import("./selectServices"), {
  ssr: false,
  loading: () => <Loading />,
});
const SelectDate = dynamic(() => import("./SelectDate"), {
  ssr: false,
  loading: () => <Loading />,
});
const SelectClock = dynamic(() => import("./selectClock"), {
  ssr: false,
  loading: () => <Loading />,
});
const Information = dynamic(() => import("./information"), {
  ssr: false,
  loading: () => <Loading />,
});

function NewDetail() {
  const ConditionalRendering = () => {
    const { step } = useVarContext();

    switch (step) {
      case EnumStep.SelectService:
        return <SelectServices />;
      case EnumStep.SelectDate:
        return <SelectDate />;
      case EnumStep.SelectClock:
        return <SelectClock />;
      case EnumStep.Information:
        return <Information />;
    }
  };

  return (
    <div className="glassy fixed overflow-x-hidden flex flex-col items-center  h-[calc(95%)] w-[calc(98%)] lg:w-[1000px] top-[50%] -translate-y-[50%] left-[50%] -translate-x-[50%]  ">
      <VarContextProvider>
        <Steper />
        <ConditionalRendering />
      </VarContextProvider>
    

在 Information 组件中我有：

function Information() {
  const [informationStep, setInformationStep] = useState<
    EnumVerifyStep | undefined
  >(EnumVerifyStep.SendVerification);

  return (
    <>
      {informationStep &&
        informationStep == EnumVerifyStep.SendVerification && (
          <SendOtp callback={setInformationStep} />
        )}
      {informationStep &&
        informationStep == EnumVerifyStep.ProgressVerification && (
          <div>Progress</div>
        )}
    </>
  );
}

但这是信息组件中出现的一个主要错误：

当我将新状态设置为 informationStep 时，整个 Information 组件再次重新安装（在 NewDetail 组件中，当我删除 ConditionalRendering 并直接返回 Information 组件时，我的问题已解决）：

问题的根源似乎是ConditionalRendering部分。

请帮助我。 Tnx 和问候

Answer 1

如果你的组件由于 prop 更改或其他状态更新而多次重新渲染，则可能会导致状态“返回”到之前的状态。

我认为您的

Information

的父组件有问题。 你需要检查一下。