ReactJS标签切换仅首次可获取数据，再次点击无响应问题求助

我在ReactJS中实现了两个标签按钮，期望点击不同标签时获取对应的数据，但当前代码仅在页面刷新后首次点击标签时有效，再次点击标签则无任何数据展示。

现有组件代码 #

const Post = ({ post, blogs }) => {
     // 最新数据
     const [students2,setStudents2] = useState({
        data: [],
        loading: true
      })
    
        const handleClick2 = async() => {
               var spath=router.asPath;
                 const response = await axios.get(`https://xxxxxxxxx/xxxxxxxxxx`)
                setStudents2({
                data: response.data,
                loading: false
            })
    }

    // 置顶数据
        const [students,setStudents] = useState({
            data: [],
            loading: true
          })
        
            const handleClick = async() => {
                   var spath=router.asPath;
                     const response = await axios.get(`https://xxxxxxxxx/xxxxxxxxxx`)
                    setStudents({
                    data: response.data,
                    loading: false
                })
        }
}

<a className="nav-link active" onClick={(e) => handleClick5(e)}>最新</a>
<a className="nav-link" onClick={(e) => handleClick2(e)}>置顶</a>

数据渲染代码 #

{students2.data?.length > 0 &&
    students2.data.map((blog) => (
        // 渲染置顶数据
    ))
}
{students.data?.length > 0 &&
    students.data.map((blog) => (
        // 渲染最新数据
    ))
}

问题分析与修复方案 #

核心问题 #

1. 事件绑定错误：「最新」标签绑定的handleClick5函数未定义，首次点击可能触发了意外逻辑，后续点击直接失效。
2. 状态逻辑混乱：两个独立状态分别存储数据，但渲染时同时展示两组数据，没有控制标签切换后的显示逻辑；且点击时未重置loading状态，多次请求后状态冲突。
3. 冗余状态管理：重复的状态结构增加了维护成本，也容易导致渲染逻辑出错。

修复方案（推荐重构） #

用统一状态管理标签切换和数据，简化逻辑：

const Post = ({ post, blogs }) => {
    // 当前激活的标签：newest（最新）/ pinned（置顶）
    const [activeTab, setActiveTab] = useState('newest');
    // 统一数据状态
    const [dataState, setDataState] = useState({
        data: [],
        loading: true
    });

    // 统一数据请求函数
    const fetchData = async (tabType) => {
        // 请求前重置loading状态
        setDataState(prev => ({ ...prev, loading: true }));
        try {
            // 根据标签类型拼接对应接口地址
            const apiUrl = tabType === 'pinned'
                ? 'https://xxxxxxxxx/xxxxxxxxxx'
                : 'https://xxxxxxxxx/xxxxxxxxxx';
            const response = await axios.get(apiUrl);
            setDataState({
                data: response.data,
                loading: false
            });
        } catch (err) {
            console.error('数据请求失败:', err);
            setDataState(prev => ({ ...prev, loading: false }));
        }
    };

    // 切换标签时自动触发数据请求
    useEffect(() => {
        fetchData(activeTab);
    }, [activeTab]);

    // 标签点击事件
    const handleTabClick = (e, tabType) => {
        e.preventDefault();
        setActiveTab(tabType);
    };

    return (
        <>
            {/* 标签按钮 */}
            <a 
                className={`nav-link ${activeTab === 'newest' ? 'active' : ''}`}
                onClick={(e) => handleTabClick(e, 'newest')}
            >
                最新
            </a>
            <a 
                className={`nav-link ${activeTab === 'pinned' ? 'active' : ''}`}
                onClick={(e) => handleTabClick(e, 'pinned')}
            >
                置顶
            </a>

            {/* 数据渲染 */}
            {dataState.loading ? (
                <div>加载中...</div>
            ) : dataState.data.length > 0 ? (
                dataState.data.map((blog) => (
                    // 替换为你的实际渲染逻辑，注意添加key
                    <div key={blog.id}>{blog.title}</div>
                ))
            ) : (
                <div>暂无数据</div>
            )}
        </>
    );
};

快速修复（不重构状态） #

如果不想修改整体结构，至少要做以下调整：

1. 把「最新」标签的点击事件改为handleClick，修正绑定错误
2. 每次点击请求前先重置对应状态的loading为true
3. 添加一个activeTab状态，渲染时只显示当前标签对应的数据

内容的提问来源于stack exchange，提问作者prabhat mohal