卸载子项时，布局组件不会在服务器端卸载

Question

我用next.js。在我的索引路由中，根据 "step" 状态，我渲染了一些具有自己布局的组件，当最后一个条件为真时， "FormContainer" 没有任何布局应该渲染但它渲染到前一个布局仅当页面得到刷新。你知道发生了什么事吗？


const Home = () => {
  const token = cookies.get('accessToken');
  const [step, setStep] = useState('');
  const [onBoarding, setOnBoarding] = useState(data);


  const render = () => {
    switch (step) {
      case 'otp':
        return (
          <Otp
            submitOtp={submitOtp}
            changeMobile={changeMobile}
            changeOTP={changeOtp}
            handleOtpChange={handleOtpChange}
            otp={otp}
          />
        );
      case 'NationalId':
        return <NationalId submitNationalId={submitNationalId} />;
      default:
        return <Mobile submitMobile={submitMobile} />;
    }
  };

  return token && onBoarding ? (
    <FormContainer data={onBoarding} nationalId={nationalId}/>
  ) : (
    <Layout>{render()}</Layout>
  );
};

export default Home;

Answer 1

这主要是因为你的条件没有在SSR上被识别！您必须检查 getInitialProps 中的条件并将其作为道具传递：

const Home = ({condition}) => {
  const token = cookies.get('accessToken');
  const [step, setStep] = useState('');
  const [onBoarding, setOnBoarding] = useState(data);

  const render = () => {
    switch (step) {
      case 'otp':
        return (
          <Otp
            submitOtp={submitOtp}
            changeMobile={changeMobile}
            changeOTP={changeOtp}
            handleOtpChange={handleOtpChange}
            otp={otp}
          />
        );
      case 'NationalId':
        return <NationalId submitNationalId={submitNationalId} />;
      default:
        return <Mobile submitMobile={submitMobile} />;
    }
  };

  return condition ? (
          <FormContainer data={onBoarding} nationalId={nationalId} />
       ) : (
          <Layout>{render()}</Layout>
   );

Home.getInitialProps = async ({ req, store }) => {
  const cookies = new Cookies(req.headers.cookie);
  const token = cookies.accessToken;
  const data = store.getState(
    state => state.onBoarding.data, //if it is from store or api call
  );
  const condition = !!(token && data);
  return { condition };
};

export default Home;

这样，客户端和服务端都知道你的情况了！

卸载子项时，布局组件不会在服务器端卸载

layout component does not unmount on server side when children unmounted

reactjs

next.js