如何過濾陣列以匹配引數值與反應

我想使用 react-bootstrap 創建一個電子商務 Web 應用程式。我希望頁面根據類別顯示不同的專案，因此如果 URL 是產品/男裝，我想過濾我的陣列并僅顯示具有相同類別的產品，即男裝（我的路徑：產品/：類別）。我已經嘗試使用 .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

uj5u.com熱心網友回復：

嘗試去掉過濾器函式中類別變數周圍的 {}。過濾器函式不在 return 陳述句中，因此是普通的 js（不是 jsx）。

此外，您永遠不會使用包含過濾產品的陣列。我建議過濾您從 axios 獲得的產品，獲取過濾后的產品并使用 setProductList 將它們置于狀態。

由于我在移動設備上，因此無法對此進行測驗，但請嘗試一下。

uj5u.com熱心網友回復：

在您使用的過濾器功能中，嘗試將其寫為

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

1. 當您將其寫為 {category} 時，將創建一個物件，其中包含 key category 和 value 作為實際值。例如，如果類別的值為鞋子，它將創建一個物件，{類別：“鞋子”}。
2. 您還需要在 useEffect 依賴項中添加類別，以在每次更新類別時重新獲取產品。

uj5u.com熱心網友回復：

首先，向您的 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]);

uj5u.com熱心網友回復：

比較元素時洗掉花括號。

__你的代碼

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

__新

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

uj5u.com熱心網友回復：

您仍在列出所有產品，因為在您的代碼中，您回圈的是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 獲取的類別相關的產品，否則它將使用整個產品串列

標籤：javascript 反应 反应路由器dom 反应引导

上一篇：如何使文本出現在按鈕中的圖示下方（材料UI）

下一篇：Javascript函陣列合