Next.js v12全局Sidebar过滤后，如何让Products组件渲染结果且避免重复？

方案一：正确使用React Context（避免Sidebar重复） #

你之前用Context出现重复Sidebar，大概率是错误地在多个页面组件里渲染了Sidebar，或是把Context Provider放在了页面层级而非全局布局层。Next.js的_app.js是全局入口，在这里只渲染一次Sidebar就能解决重复问题，同时把Context Provider放在这里覆盖整个应用。

步骤1：创建Filter Context #

// contexts/FilterContext.js
import { createContext, useContext, useState } from 'react';

const FilterContext = createContext();

export function FilterProvider({ children }) {
  // 存储过滤条件，比如分类、价格区间等
  const [filters, setFilters] = useState({});

  // 更新过滤条件的方法
  const updateFilters = (newFilters) => {
    setFilters(prev => ({ ...prev, ...newFilters }));
  };

  return (
    <FilterContext.Provider value={{ filters, updateFilters }}>
      {children}
    </FilterContext.Provider>
  );
}

// 自定义Hook简化调用
export function useFilter() {
  return useContext(FilterContext);
}

步骤2：在_app.js里全局配置Provider和Sidebar #

// pages/_app.js
import { FilterProvider } from '../contexts/FilterContext';
import Sidebar from '../components/Sidebar';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <FilterProvider>
      {/* 全局Sidebar只在这里渲染一次 */}
      <div style={{ display: 'flex' }}>
        <Sidebar />
        <main style={{ flex: 1 }}>
          <Component {...pageProps} />
        </main>
      </div>
    </FilterProvider>
  );
}

export default MyApp;

步骤3：Sidebar里调用Context更新过滤条件 #

// components/Sidebar.js
import { useFilter } from '../contexts/FilterContext';

export default function Sidebar() {
  const { updateFilters } = useFilter();

  const handleCategoryChange = (category) => {
    updateFilters({ category });
    // 这里可同步调用API，或让Products组件根据状态自动请求
  };

  return (
    <div className="sidebar">
      {/* 你的过滤UI，比如分类选择按钮 */}
      <button onClick={() => handleCategoryChange('electronics')}>电子产品</button>
      <button onClick={() => handleCategoryChange('clothing')}>服装</button>
    </div>
  );
}

步骤4：Products组件根据Context状态渲染结果 #

// components/Products.js
import { useFilter } from '../contexts/FilterContext';
import { useState, useEffect } from 'react';

export default function Products() {
  const { filters } = useFilter();
  const [products, setProducts] = useState([]);

  useEffect(() => {
    // 过滤条件变化时，重新请求API
    const fetchFilteredProducts = async () => {
      const res = await fetch(`/api/products?category=${filters.category || ''}`);
      const data = await res.json();
      setProducts(data);
    };

    fetchFilteredProducts();
  }, [filters]); // 依赖过滤条件，变化时触发请求

  return (
    <div className="products-grid">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

方案二：用URL Query同步过滤状态（支持刷新保留过滤条件） #

如果不需要Context，也可以通过修改URL查询参数传递过滤条件，Products组件监听URL变化请求数据，这种方式天然支持刷新页面后保留过滤状态。

Sidebar里修改URL Query #

// components/Sidebar.js
import { useRouter } from 'next/router';

export default function Sidebar() {
  const router = useRouter();

  const handleCategoryChange = (category) => {
    // 修改URL参数，shallow: true避免页面全量刷新
    router.push({
      pathname: router.pathname,
      query: { ...router.query, category }
    }, undefined, { shallow: true });
  };

  return (
    <div className="sidebar">
      <button onClick={() => handleCategoryChange('electronics')}>电子产品</button>
      <button onClick={() => handleCategoryChange('clothing')}>服装</button>
    </div>
  );
}

Products组件监听Query变化 #

// components/Products.js
import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

export default function Products() {
  const router = useRouter();
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const queryParams = new URLSearchParams(router.query).toString();
      const res = await fetch(`/api/products?${queryParams}`);
      const data = await res.json();
      setProducts(data);
    };

    fetchProducts();
  }, [router.query]); // 监听URL参数变化

  return (
    <div className="products-grid">
      {products.map(product => (
        <div key={product.id} className="product-card">
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}

关键注意点 #

• 全局Sidebar只在_app.js里渲染一次，禁止在其他页面组件中重复渲染。
• 使用Context时，确保Provider包裹整个应用，Sidebar和Products都在Provider覆盖范围内。
• 方案二中的shallow: true参数很关键，能在不重新加载页面的前提下更新URL，提升交互体验。

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