如何过滤数组以匹配参数值与反应

Question

我想使用 react-bootstrap 创建一个电子商务 Web 应用程序。我希望页面根据类别显示不同的项目，所以如果 URL 是 product/men'sclothing 我想过滤我的数组并仅显示具有相同类别的男装产品（我的路径：产品分类）。我已经尝试使用 .filter 方法过滤我的数组，但它没有用，它仍然显示来自不同类别的所有产品，我该如何修复它？

分类产品页面：

const ProductList = () => {
  const { category } = useParams()
  const[productList, setProductList]= useState();

  useEffect(() =>{
    axios.get(`https://fakestoreapi.com/products`).then(res => {
        const products = res.data;
        setProductList(products);

        var filteredCategory =
         productList.filter((productList) =>productList.category === {category})
      })
  }, []);

  console.log(productList)

  return (
    <>
      <Row>
        <h1> This is {category} paged</h1>
        {productList && productList.map(product =>{
          const {id, title, price, category,description,image} = product;
          return(
          <Col lg={3} className="d-flex">
            <Card key={id} className="flex-fill productlist">
              <Card.Img variant="top" src={image} />
              <Card.Body>
                <Card.Title>{title}</Card.Title>
                <Card.Text>{category}</Card.Text>
                <Card.Text>
                  Current Price: {price}
                </Card.Text>
                <Button variant="primary">Add to cart</Button>
              </Card.Body>
            </Card>
          </Col>
          )
        })}
      </Row>
    </>
  )
}

export default ProductList

Answer 1

首先，将依赖项添加到 UseEffect，然后移除过滤器内的括号。

useEffect(() => {
  async function getByCategory(){
   const req = await fetch(URL):
   const res = await req.json();
   const filter = res.filter((item) => item.category === category);
   setProductList(filter);
  }
  // check if params exits
  if(category){
      getByCategory();
  }
}, [category]);

Answer 2

尝试去掉过滤器函数中类别变量周围的 {}。过滤器函数不在 return 语句内，因此是纯 js（不是 jsx）。

此外，您永远不会使用包含过滤产品的数组。我建议过滤您从 axios 获得的产品，将过滤后的产品放入 setProductList 状态。

由于我在移动设备上，因此无法对此进行测试，但请尝试一下。

Answer 3

在你用过的filter函数中，试试写成

productList.filter((product) => product.category === category)

当您将其写为{category}时，将创建一个对象，其中键类别和值作为实际值。例如，如果 category 的值为 shoes，它将创建一个对象，{ category: "shoes" }。
您还需要在 useEffect 依赖项中添加类别，每次更新类别时 re-fetch 产品。

Answer 4

比较元素时去掉大括号。

__你的代码

productList.filter((productList) =>productList.category === {category})

__NEW

productList.filter((productList) =>productList.category === category)

Answer 5

您仍在列出所有产品，因为在您的代码中，您循环遍历 productList 状态而不是来自过滤数据的新值。

{productList && productList.map(product =>{
    // this is the way you have defined your map code
}) }

应该是这样的

const ProductList = () => {
    const { category } = useParams()
    const[productList, setProductList]= useState();


    useEffect(() =>{
    axios.get(`https://fakestoreapi.com/products`).then(res => {
        const products = res.data;
        setProductList(products);
        })
    }, []);

    let filteredProducts = null;

    if(category) {
        filteredProducts = productList.filter((productList) => productList.category === category);
    } else {
        filteredProducts = products;
    }
         

    return (
        <>
          <Row>
            <h1> This is {category} paged</h1>
            {filteredProducts && filteredProducts.map(product =>{
               // some code 
            })}
          </Row>
        </>
    )
}

export default ProductList

如您所见，我定义了一个变量 filter Products，其中包含与从 url 获得的类别相关的产品，如果它存在，否则它将使用整个产品列表

如何过滤数组以匹配参数值与反应

How to filter array to match params value with react

javascript

reactjs

react-bootstrap

react-router-dom