是否可以只更新 map() 中的“查看更多”？

Question

我正在练习一个使用React.js作为前端框架来展示产品的项目。我试图通过 product_type 过滤产品。获取数据时，我使用 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。在地图操作中，您使用

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>
  );
}

Answer 2

您需要一个专门的函数来根据需要处理您的数据。这可以在从 API 获取数据后首次加载数据时打开，或者在单击按钮请求更多数据时打开。

建议您在将这些数据传递给您的组件之前使用它。这样，通过应用关注点分离，您将拥有更易读/更清晰的代码，而不是在组件上执行所有转换/逻辑。尽量让复杂的代码远离按钮、div、组件等

我的建议：

    
     const [products, setProducts] = useState([]);
     const [productSlice, setProductSlice] = useState(3);
    
     useEffect(() => {
        const fetchData = () => {
           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;
    

  //work with the data here
  //then set the value with data in a shape that will make easy to work in the view

            const result = dowhatyouneedHereToTransformTheData();
            setProducts(result);

          });
         }


         fetchData().catch(err=>console.error(err));

      }, [products]);
    

希望对你有帮助

Answer 3

根据您的代码，您似乎已经为每个类别实现了一个“查看更多”按钮，单击时该按钮会将 productSlice 状态增加 1。但是，您提到要在特定类别中显示另外 3 种产品而不是递增 1。为此，您可以按如下方式修改代码：

更新productSlice状态增量值从1到3：

<button
  onClick={() => {
    products.filter((type) => type.product_type === cat).length >
      productSlice + 3 &&
      setProductSlice(productSlice + 3);
  }}
>
  See more
</button>

更新

.slice()

功能中用于显示产品的

map()

方法，使用

productSlice

代替固定值3：

{
products
  .filter((type) => type.product_type === cat)
  .slice(0, productSlice)
  .map((product) => (
    <Product data={product} />
  ))}

通过这些更改，每个类别的“查看更多”按钮现在会将 productSlice 状态递增 3，单击时会显示该类别中的另外 3 个产品，而不仅仅是 1 个。