我有这些组件层次结构:
新详情>信息>发送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 和问候
如果你的组件由于 prop 更改或其他状态更新而多次重新渲染,则可能会导致状态“返回”到之前的状态。
我认为您的
Information
的父组件有问题。
你需要检查一下。