React Radio 组件控制 Tab 切换页面,如何避免重复请求接口
可以使用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页面时,根据需要进行接口请求。
原文地址: https://www.cveoy.top/t/topic/hceK 著作权归作者所有。请勿转载和采集!