在 React JS 中过滤查询集

Question

我能够获得我所有的产品，但现在我想在下一部分中只展示摩托车。那么该怎么做呢？我尝试了过滤器，但我想我没有正确地做到这一点。有人可以建议我怎么做

这是我的代码，您可以从这里查看。我已经更新了我的帖子，所以请您检查并查看这里的操作，因为我是 react 新手

import React, { useState, useEffect } from 'react'
import { Row, Col } from 'react-bootstrap'
import Product from '../components/Product'
import Loader from '../components/Loader'
import Message from '../components/Message'
import { useDispatch, useSelector } from 'react-redux'
import { listProducts } from '../actions/productActions'
import ProductCarousel from '../components/ProductCarousel'

function HomeScreen({history}) {

    const dispatch = useDispatch()
    const productList = useSelector(state => state.productList)
    const {error, loading, products} = productList

    let keyword = history.location.search


    useEffect(() => {
        dispatch(listProducts(keyword))
        params: {  }

    //     async function fetchProducts() {
    //         const { data } = await axios.get('/api/products/')
    //         setProducts(data)
    //     }

    //     fetchProducts()

    }, [dispatch, keyword])

    return (
        <div>
            { !keyword && <ProductCarousel /> }
            <br />
            <h3 ><b><i>Recent Products <i class="fab fa-product-hunt"></i></i></b></h3>
            <hr />
            <br />
            {loading ? <Loader />
                : error ? <Message variant='danger'>{error}</Message>
                    :
                    <Row className='flex flex-wrap' >
                        {products.length === 0 && (
                                <Col style={{ textAlign: "center" }}>
                                    <img src='https://cdn.dribbble.com/users/2382015/screenshots/6065978/no_result.gif'
                                    ></img>
                                    
                                </Col>                
                            )}

                        {products.map(product => (
                            <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                                <Product product={product} />
                            </Col>
                        ))}
                    </Row>  }  <br />
                <Row>
                    <Col>
                        <h3><b> <i> MotorBike   <i class="fas fa-biking"></i></i></b></h3>
                        <hr />
                        {products.filter(product => product.category === 'Car').map(p => (
                            <li>
                                {p.name}
                            </li>
                        ))}     
                    </Col>
                </Row>
        </div>
    )
}

export default HomeScreen

Answer 1

const products = {...} // your Products
const [data, setData] = useState([])
const filterProducts = () => {
    if (Products !== undefined) {
      const results = products.filter((product) =>
        product.category.includes('Car')
      );
      setData(results);
    }
  };

  useEffect(() => {
    filterProducts()
  }, [products]);

然后通过map回调在jsx中使用数据变量