如何通过onClick按钮切换useEffect中的博客Feed视图？

核心是通过状态跟踪当前视图类型，避免页面跳转，同时根据视图实时过滤博客内容。下面是修改后的代码和关键说明：

关键修改点 #

• 新增currentView状态记录当前视图（home/personal），默认设为home
• 移除按钮外层的<a>标签，防止点击触发页面跳转
• 实现按钮的onClick切换逻辑，同时动态修改按钮文本，让用户明确操作目标
• 直接在渲染阶段根据当前视图过滤博客，避免useEffect导致的状态不同步问题

修改后的完整代码 #

const Home = () => {
    const [viewCount, setViewCount] = useState(0);
    const {data: blogs, isPending } = useFetch();
    const history = useHistory();
    // 新增状态：记录当前显示的视图类型
    const [currentView, setCurrentView] = useState('home');

    // 根据当前视图过滤博客的辅助函数
    const getFilteredBlogs = () => {
        if (!blogs) return [];
        return currentView === 'personal' 
            ? blogs.filter(blog => blog.author === 'mario')
            : blogs;
    };

    // 视图切换函数
    const toggleView = () => {
        setCurrentView(prev => prev === 'home' ? 'personal' : 'home');
    };

    return (
        <div className="home">
            <div className="profile">
                <h2>Hello, User!</h2>
                <div className="profile-picture">&nbsp;</div>
                <p>Profile Views: {Math.round(viewCount / 2)}</p>
                {/* 移除跳转a标签，添加切换逻辑，动态修改按钮文本 */}
                <button onClick={toggleView}>
                    {currentView === 'home' ? '查看我的博客' : '查看全部博客'}
                </button>
            </div>
            <div className="feed">
                {isPending && <div>Loading... </div>}
                {/* 渲染过滤后的博客，标题随视图切换 */}
                { blogs && <BlogList blogs={getFilteredBlogs()} title={currentView === 'home' ? '全部博客' : '我的博客'}/> }
            </div>
        </div>
    );
}

逻辑说明 #

1. 状态驱动视图：用currentView明确标记当前显示模式，切换逻辑只需修改这个状态，React会自动重新渲染对应内容
2. 避免无效跳转：移除<a>标签后，按钮点击只会触发状态更新，不会刷新页面或跳转
3. 实时过滤数据：通过getFilteredBlogs在渲染时实时过滤博客，不需要额外维护newBlog状态，避免数据不同步（原代码中useEffect依赖为空，博客加载完成后不会更新newBlog）
4. 用户体验优化：按钮文本和Feed标题随视图动态变化，操作反馈更清晰

修改后默认显示全部博客，点击按钮切换到仅展示mario的博客，再次点击切回全部，页面刷新后会回到默认的home视图，完全符合需求。

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