React中如何在Tabs内根据酒店验证状态条件渲染对应组件

你当前的代码核心问题是把Tabs组件写在了酒店列表的map循环内部，会导致每遍历一个酒店就渲染一次标签栏，逻辑完全错位。调整思路很简单，把标签栏挪到外层全局只渲染一次，每个标签页内部单独过滤对应状态的酒店渲染即可。

调整后可直接运行的代码 #

const AdminDashboard = () => {
    // 提前提取酒店列表，避免重复执行取值逻辑
    const hotelList = Object.values(hotel);

    return (
        <>
            <DashboardWrapper>
                <h1 className="title1 text-center mb-4">Admin Dashboard</h1>
                <Tabs defaultActiveKey="1">
                    {/* 待审核标签页 */}
                    <TabPane tab="Pending" key="1" className="tabs">
                        {hotelList
                            .filter(item => item.verifiedStatus === "pending")
                            .map(item => <AdminCard key={item._id} item={item} />)
                        }
                    </TabPane>

                    {/* 已通过标签页 */}
                    <TabPane tab="Verified" key="2" className="tabs">
                        {hotelList
                            .filter(item => item.verifiedStatus === "verified")
                            .map(item => <AdminCard key={item._id} item={item} />)
                        }
                    </TabPane>

                    {/* 已拒绝标签页 */}
                    <TabPane tab="Rejected" key="3" className="tabs">
                        {hotelList
                            .filter(item => item.verifiedStatus === "rejected")
                            .map(item => <AdminCard key={item._id} item={item} />)
                        }
                    </TabPane>
                </Tabs>
            </DashboardWrapper>
        </>
    );
};

可选优化方案（大数据量场景） #

如果酒店数据量很大，上面三次filter会遍历三次数组，你可以用reduce做一次遍历完成全部分组，性能更好：

const AdminDashboard = () => {
    const hotelList = Object.values(hotel);
    // 一次遍历完成三种状态的分组
    const hotelGroups = hotelList.reduce((groups, item) => {
        const status = item.verifiedStatus;
        groups[status].push(item);
        return groups;
    }, { pending: [], verified: [], rejected: [] });

    return (
        <>
            <DashboardWrapper>
                <h1 className="title1 text-center mb-4">Admin Dashboard</h1>
                <Tabs defaultActiveKey="1">
                    <TabPane tab="Pending" key="1" className="tabs">
                        {hotelGroups.pending.map(item => <AdminCard key={item._id} item={item} />)}
                    </TabPane>
                    <TabPane tab="Verified" key="2" className="tabs">
                        {hotelGroups.verified.map(item => <AdminCard key={item._id} item={item} />)}
                    </TabPane>
                    <TabPane tab="Rejected" key="3" className="tabs">
                        {hotelGroups.rejected.map(item => <AdminCard key={item._id} item={item} />)}
                    </TabPane>
                </Tabs>
            </DashboardWrapper>
        </>
    );
};

注意：如果你项目里的pending、rejected状态的字符串值和示例里的不一致，直接替换对应判断条件里的字符串即可，匹配你实际业务的状态枚举值就能正常运行。

内容的提问来源于stack exchange，提问作者Gunal Bondre