React项目中实现分类独立加载更多产品的方法咨询

你的问题出在使用了全局的productSlice状态，点击任何分类的"查看更多"都会修改这个全局值，导致所有分类都加载更多产品。要实现仅特定分类加载，需要给每个分类单独维护显示数量。

修改后的完整代码（App.js） #

import { useEffect, useState } from "react";
import axios from "axios";

import "./styles.css";
import Product from "./Product";

export default function App() {
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  // 用对象存储每个分类的当前显示数量，key为分类名，value为数量
  const [categoryShowCounts, setCategoryShowCounts] = useState({});

  useEffect(() => {
    axios
      .get("https://www.allbirds.com/products.json?limit=50")
      .then((response) => {
        const { products } = response.data;
        setProducts(products);

        // 提取所有唯一的产品分类
        const uniqueCategories = [...new Set(products.map(p => p.product_type))];
        setCategories(uniqueCategories);

        // 初始化每个分类的显示数量为3
        setCategoryShowCounts(
          uniqueCategories.reduce((acc, category) => {
            acc[category] = 3;
            return acc;
          }, {})
        );
      });
  }, []);

  // 处理单个分类的"查看更多"点击事件
  const handleLoadMore = (category) => {
    setCategoryShowCounts(prevCounts => ({
      ...prevCounts,
      // 当前分类的显示数量增加3
      [category]: prevCounts[category] + 3
    }));
  };

  return (
    <div className="App">
      <div>
        {categories.map((cat, i) => {
          // 获取当前分类的产品列表
          const categoryProducts = products.filter(p => p.product_type === cat);
          // 当前分类的显示数量，默认3
          const currentShowCount = categoryShowCounts[cat] || 3;

          return (
            <div key={i} className="category-section">
              <h5>{cat}</h5>

              {categoryProducts
                .slice(0, currentShowCount)
                .map((product) => (
                  <Product key={product.handle} data={product} />
                ))}

              <p>
                Total in {cat} : {categoryProducts.length}
              </p>

              {/* 只有当还有未显示的产品时，才显示"查看更多"按钮 */}
              {categoryProducts.length > currentShowCount && (
                <button onClick={() => handleLoadMore(cat)}>
                  See more
                </button>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

关键改动说明 #

1. 替换全局状态为分类独立状态：用categoryShowCounts对象替代原来的productSlice，每个分类单独存储显示数量，避免全局修改影响所有分类。
2. 初始化分类显示数量：在获取产品数据后，提取所有唯一分类，并给每个分类初始设置显示3个产品。
3. 单独处理分类加载更多：点击按钮时仅更新当前分类的显示数量，通过函数式更新确保状态的正确性。
4. 优化按钮显示逻辑：只有当分类下产品总数大于当前显示数量时，才显示"查看更多"按钮，避免无效按钮。
5. 代码性能优化：提前计算当前分类的产品列表，避免多次重复执行filter方法。

补充说明 #

• Product组件中已经用handle作为key，所以在App.js的map里给Product加上key={product.handle}，符合React的key规范。
• 给每个分类的外层容器加上className="category-section"，方便后续样式隔离。

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