antd，tabs组件下方数据不显示？
- react中，使用antd的Tabs标签页组件，tabs中的代码在页面不显示
- tabkey === 0或1时，后面的组件都没有显示。
const { TabPane } = Tabs;
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
const storeType = {
0: 'B2B 批发店铺',
1: 'B2C 零售店铺',
};
export default function StoreSelect() {
const navigate = useNavigate();
const { t } = useTranslation();
const [tabkey, setTabKey] = useState(0);
const [storeList, setStoreList] = useState([]);
const activeList = storeList.filter((a) => a.status == 0);
const DeactivateList = storeList.filter((a) => a.status == 1);
useEffect(() => {
fetchGetShopList().then((res) => {
setStoreList(res);
});
}, [tabkey]);
const onBack = () => {
navigate('/');
};
const handleSetTab = (e, newValue) => {
console.log('handleSetTab', e);
setValue(newValue);
};
const handleTab = (item) => {
setTabKey(+item);
};
const tabItems = [
{
key: '0',
label:'活跃',
},
{
key: '1',
label:'停用',
},
];
return (
<>
{!storeList && (
<Progress
strokeColor={{ '0%': '#108ee9', '100%': '#87d068' }}
className={styles.pros}
/>
)}
<Row className={styles.root}>
<Col span={10} className={styles.container}>
<div className={styles.paper}>
<div className={styles.logo}>
<img src={logo} width={200} height={42} alt="" />
</div>
<div className={styles.header}>
<Typography.Title level={3} style={{ fontWeight: 500 }}>
<Button
shape="circle"
type="text"
className={styles.iconButton}
icon={<ArrowLeftOutlined />}
onClick={onBack}
/>
{t('store.title')}
</Typography.Title>
<Button
size="large"
type="primary"
onClick={() => navigate('/create-store-type')}
>
{t('store.shop')}
</Button>
</div>
{storeList.length < 1 ? (
<Alert
type="info"
message="您暂无店铺"
description="如需，请点击创建其他店铺"
showIcon
style={{
marginTop: '20px',
height: '150px',
padding: '30px 0 0 20px',
}}
/>
) : (
<Tabs
activeKey={'' + tabkey}
items={tabItems}
onTabClick={(e) => handleTab(e)}
size="large"
>
{tabkey === 0 && (
<div>
{storeList === null ? (
<div className={styles.loading}>
<Spin indicator={antIcon} />
</div>
) : storeList ? (
<>
<List>
{activeList.map((item) => {
const p: any = {};
if (item.status == 0 && item.shopDomain) {
p.href =
'http://' +
item.shopDomain +
'/admin/auth/login';
}
<List.Item key={item.sid} className={styles.item}>
<div className={styles.title}>
<div
style={{
fontSize: 23,
color: '#757575',
marginRight: 25,
}}
>
<BankOutlined />
</div>
<div className={styles.listBody}>
<Card
title={
<Typography.Title
level={4}
style={{ fontWeight: 500 }}
>
{item?.name}
</Typography.Title>
}
>
<div className={styles.sub}>
{item?.shopType == 1 && (
<Chip
label={t('erp.administrator')}
size="small"
variant="outlined"
className={styles.chip}
/>
)}
{storeType[item?.shopType]}
</div>
<div style={{ color: '#008060' }}>
{item?.shopDomain}
</div>
</Card>
</div>
</div>
<Button>
<span
style={{
fontSize: '14px',
margin: '0 10px 0 0',
}}
>
{item.status == 1
? t('erp.under-review')
: ''}
</span>
{item.status == 1 ? <></> : <RightOutlined />}
</Button>
</List.Item>
})}
</List>
</>
) : (
<Alert type="error" showIcon description={t('erp.tip2')}>
{/* {t('erp.tip2')} */}
</Alert>
)}
</div>
)}
{tabkey === 1 && (
<div>
{storeList === null ? (
<div className={styles.loading}>
<Spin indicator={antIcon} />
</div>
) : storeList ? (
<>
<List>
{DeactivateList.map((item) => {
const p: any = {};
if (item.status == 0 && item.shopDomain) {
p.href = 'http://' + item.shopDomain;
}
<List.Item key={item.sid} className={styles.item}>
<div className={styles.title}>
<div
style={{
fontSize: 23,
color: '#757575',
marginRight: 25,
}}
>
<BankOutlined />
</div>
<div className={styles.listBody}>
<Card
title={
<Typography.Title
level={4}
style={{ fontWeight: 500 }}
>
{item?.contacts}
</Typography.Title>
}
>
<div className={styles.sub}>
{item?.shopType == 1 && (
<Chip
label={t('erp.administrator')}
size="small"
variant="outlined"
className={styles.chip}
/>
)}
{storeType[item?.shopType]}
</div>
<div style={{ color: '#008060' }}>
{item?.shopDomain}
</div>
</Card>
</div>
</div>
<Button>
<span
style={{
fontSize: '14px',
margin: '0 10px 0 0',
}}
>
{item.status == 0
? t('erp.under-review')
: ''}
</span>
{item.status == 0 ? <></> : <RightOutlined />}
</Button>
</List.Item>
})}
</List>
</>
) : (
<Alert
type="error"
showIcon
description={t('erp.tip2')}
></Alert>
)}
</div>
)}
{/* </> */}
</Tabs>
)}
</div>
</Col>
<Col span={14} className="bg-image" />
</Row>
</>
);
}
Tabs中的内嵌子组件无法显示，放到外部来
<Tabs
activeKey={'' + tabkey}
items={tabItems}
onTabClick={(e) => handleTab(e)}
size="large"></Tabs>//把最后的结束标签放到这里
两个等号==
不能写成3个等号===
（如果是3个等号会判断值是否相等，且数据类型是否相等，你这里的数据一边是Number一边是String,所以才出问题）
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632不知道你这个问题是否已经解决, 如果还没有解决的话:
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7806545
- 这篇博客你也可以参考下：antd Tabs切换时重新渲染页面
- 除此之外, 这篇博客: React之Antd组件中的 Tabs标签页 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
Tab带图的页签
handleCallback = (key)=>{ message.info("Hi,您选择了页签："+key) } <Card title="Tab带图的页签" className="card-wrap"> <Tabs defaultActiveKey="1" onChange={this.handleCallback}> <TabPane tab={<span><Icon type="plus" />Tab 1</span>} key="1">欢迎学习React课程</TabPane> <TabPane tab={<span><Icon type="edit" />Tab 2</span>} key="2">欢迎学习React课程</TabPane> <TabPane tab={<span><Icon type="delete" />Tab 3</span>} key="3">React是一个非常受欢迎的MV*框架</TabPane> </Tabs> </Card>
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^