如果组件内的方法不需要请求数据,可以将它作为一个普通的React组件即可。不需要使用useState或useEffect等钩子函数来处理数据的获取和更新。以下是修改后的代码示例:

const index = () => {
	const [mode, setMode] = useState('license');
	const [data,setData] = useState({});
	const [licenseInfo, setLicenseInfo] = useState({});
	const [licenseImg, setLicenseImg] = useState(null);
	const [IdCardData, setIdCardData] = useState({});
	const [IdCardImg, setIdCardImg] = useState(null);
	const [waitResultL, setWaitResultL] = useState(false);
	const [waitResultS, setWaitResultS] = useState(false);
	const history = useHistory();
	const handleModeChange = (e) => {
		setMode(e.target.value);
		// history.push(`/home/admin/basicInfo/list/${e.target.value}`)
	};
	const getLicense = () => {
		fireGetRequest(ESIGN_GET_LICENSE).then((res) => {
			if (res.code !== 200) {
				openNotification('error', '获取营业执照信息失败', res.message);
				return;
			} else {
				setWaitResultL(true);
				setLicenseInfo(res.data);
				setLicenseImg({license: [res.data.uuid]})
			}
		});
	};
	const getIdCard = () => {
		fireGetRequest(ESIGN_GET_ID_CARD).then(async (res) => {
			if (res.code !== 200) {
				openNotification('error', '获取法人身份证信息失败', res.message);
				return;
			} else {
				setWaitResultS(true);
				setIdCardData(res.data);
				setIdCardImg( { idCardBack: [res.data.backUuid], idCardPos: [res.data.posUuid] })
			}
		});
	};
	useEffect(() => {
		getLicense();
		getIdCard();
	},[])
	return (
		<div className='nf-page-content'>
			<div className='nf-page-list'>
				<div className='nf-page-tabChange'>
					<Radio.Group
						onChange={handleModeChange}
						value={mode}
					>
						<Radio.Button value="license">营业执照</Radio.Button>
						<Radio.Button value="idCard">法人身份证</Radio.Button>
						<Radio.Button value="billingInfo">开票信息</Radio.Button>
					</Radio.Group>

					<Tabs activeKey={mode}>
						<Tabs.TabPane key={'license'}>
							<BusinessLicense 
								licenseInfo={licenseInfo}
								licenseImg={licenseImg}
								getLicense={getLicense}
							/>
						</Tabs.TabPane>
						<Tabs.TabPane key={'idCard'}>
							<LegalPersonInfo 
								IdCardData={IdCardData}
								IdCardImg={IdCardImg}
								getLicense={getIdCard}
							/>
						</Tabs.TabPane>
						<Tabs.TabPane key={'billingInfo'}>
							<BillingInfo />
						</Tabs.TabPane>
					</Tabs>
				</div>
			</div>	
		</div>
	);
};

在上述代码中,将组件作为一个普通的React组件进行渲染,不再使用useState或useEffect来处理数据的获取和更新。

React 组件内方法不请求数据时,如何使用 Radio 控制 Tab 页面切换

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

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