异步/等待操作后重新挂载组件

Question

我有一个大问题。请参阅下面的代码：

"use client";
import React, { useState } from "react";
import { EnumVerifyStep } from "@/types";
import dynamic from "next/dynamic";
import { sendOtp } from "@/services/api";

const SendOtp = dynamic(() => import("./sendOtp"), { ssr: false });

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

  const handleStep=async(mobile:string)=>{
    let response = await sendOtp({ mobile: mobile! });
    if (response&& response.isSend) {
      setVerifyStep(EnumVerifyStep.ProgressVerification);
    }
  }

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

export default Information;

当我向后端发送请求时，在收到响应并设置状态后。它首先设置值，然后返回到之前的状态。注释（或删除）所有异步等待部分后。问题已解决。为什么 ？请帮助我

Answer 1

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

我认为您的

Information

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