javascript - 是否可以只更新map()内部的 "see more"？

Question

我正在练习一个项目，使用React.js作为前端框架来展示产品。我尝试按产品类型过滤产品。获取数据时，我使用 slice() 在每个类别上显示 3 个产品，然后如果该类别中的产品超过 3 个，则单击“查看更多”按钮，它将显示另外 3 个产品。

有没有办法只显示特定类别中的另外 3 个产品？现在，当我单击按钮时，每个类别都会加载 3 个以上的产品。

任何和所有反馈都将受到赞赏。谢谢!

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 [productSlice, setProductSlice] = useState(3);

  useEffect(() => {
    axios
      .get("https://www.allbirds.com/products.json?limit=50")
      .then((response) => {
        // All products return as an array of product objects
        const { products } = response.data;

        setProducts(products);
      });
  }, []);


  return (
    <div className="App">
      <div>
        {categories.map((cat, i) => (
          <>
            <div>
              <h5 key={i}>{cat}</h5>

              {products
                .filter((type) => type.product_type === cat)
                .slice(0, productSlice)
                .map((product) => (
                  <Product data={product} />
                ))}
            </div>
            <p>
              Total in {cat} :
              {products.filter((type) => type.product_type === cat).length}
            </p>

            <button
              onClick={() => {
                // console.log("This is",cat);
                products.filter((type) => type.product_type === cat).length >
                  2 && setProductSlice(productSlice + 1);
              }}
            >
              See more
            </button>
          </>
        ))}
      </div>

      
    </div>
  );
}

产品.js

export default function Product({ data }) {
  

  const { images, title, handle } = data;

  return (
    <div key={handle}>
      <h2>{title.split("-")[0]}</h2>
      <div>
        <img src={images[0].src} style={{ width: "100px" }} alt={handle} />
      </div>
    </div>
  );
}

Answer 1

由于您希望在不同类别中显示不同数量的产品，因此您可以定义一个状态 productSlices 来表示这些产品数量。

productSlices 的初始值为

{
  Shoes: 3,
  Apparel: 3,
  Socks: 3
}

例如，当您单击 Shoes 类别中的按钮时，productSlices.Shoes 的值将变为 4，其余部分保持为 3。在 map 操作中，您使用 productSlices[cat] 获取该类别中应显示的产品数量。

您可以像这样修改代码:

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

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

export default function App() {
  const categories = ["Shoes", "Apparel", "Socks"];
  const [products, setProducts] = useState([]);
  
  const [productSlices, setProductSlices] = useState(
    categories.reduce((a, v) => ({ ...a, [v]: 3 }), {})
  );
  
  useEffect(() => {
    axios
      .get("https://www.allbirds.com/products.json?limit=50")
      .then((response) => {
        // All products return as an array of product objects
        const { products } = response.data;

        console.log(products);
        setProducts(products);
      });
  }, []);

  return (
    <div className="App">
      <div>
        {categories.map((cat, i) => (
          <>
            <div>
              <h5 key={i}>{cat}</h5>

              {products
                .filter((type) => type.product_type === cat)
                .slice(0, productSlices[cat])
                .map((product) => (
                  <Product data={product} />
                ))}
            </div>
            <p>
              Total in {cat} :
              {products.filter((type) => type.product_type === cat).length}
            </p>

            <button
              id={cat}
              onClick={() => {
                setProductSlices({
                  ...productSlices,
                  [cat]: productSlices[cat] + 1
                });
              }}
            >
              See more
            </button>
          </>
        ))}
      </div>
    </div>
  );
}