可以使用useState来控制tab页面的组件初始化请求接口的时机。可以在每个tab对应的组件中,使用useEffect来监听mode的变化,当mode变化时,再进行接口请求。

例如,在BusinessLicense组件中,可以这样写:

const BusinessLicense = ({ licenseInfo, licenseImg, getLicense }) => {
  useEffect(() => {
    if (licenseInfo && Object.keys(licenseInfo).length === 0) {
      getLicense();
    }
  }, [licenseInfo, getLicense]);

  // 其他组件代码
};

LegalPersonInfo组件中也可以类似地处理:

const LegalPersonInfo = ({ IdCardData, IdCardImg, getLicense }) => {
  useEffect(() => {
    if (IdCardData && Object.keys(IdCardData).length === 0) {
      getIdCard();
    }
  }, [IdCardData, getIdCard]);

  // 其他组件代码
};

这样,在初始渲染时,如果对应的数据为空,就会触发接口请求。而当tab切换时,由于mode的变化,会重新渲染对应的组件,然后再次判断数据是否为空,如果为空,则再次触发接口请求。这样就能实现在切换tab页面时,根据需要进行接口请求。

React Radio 组件控制 Tab 切换页面,如何避免重复请求接口

原文地址: https://www.cveoy.top/t/topic/hceK 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录