我正在练习一个项目,使用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>
);
}
最佳答案
由于您希望在不同类别中显示不同数量的产品,因此您可以定义一个状态 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>
);
}
关于javascript - 是否可以只更新map()内部的 "see more"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/75969004/