React JS 根据年份过滤产品

Question

我想根据年份过滤产品，我制作了 组件，其中有 菜单来选择年份。我知道这里将产品日期与过滤年份进行比较的代码是比较代码：-

const filteredYearValue = productListItems.filter(e => {
    return e.date.getFullYear().toString() === filterValue;
})

但我很少有困惑将过滤后的值从ItemDateFilter.js获取到<代码>ProductITems.js。

这是我的代码 - https://github.com/mohitdevelops/react-lessons/tree/主/产品应用

Answer 1

您可以将状态从 ItemDateFilter 组件移动到 App 组件

// App.js
const [filterValue, setFilterValue] = useState('2022');

function onFilterDateValue(event){
   setFilterValue(event.target.value);                     
}

，并通过 props 将 onFilterDateValue 函数传递给 ItemDateFilter 组件

<ItemDateFilter onFilterChange={onFilterDateValue}/>

，并在传递到 ProductListItems 组件之前过滤列表

<ProductItems productListItems={productLists.filter(item => item.date.getFullYear() === +filterValue)}/>

Answer 2

您修改 App.js 、 ProductItems.js 、 ItemDateFilter.js 以下代码

/* App.js*/
import './App.css';
import AddProduct from './components/AddProduct/AddProducts';
import ProductItems from './components/Products/ProductItems/ProductItems';
import ItemDateFilter from './components/ItemDateFilter';
import { useEffect, useState } from 'react';

export default function App() {

  const ALL_PRODUCTS = [
        {
            name: "Titan",
            des: "Look modish by donning this women's watch from the Ceramic Refresher collection by Titan. Enclosed in a 33 mm case, the mother of pearl round dial is secured by a mineral glass. It displays plain three hands and a crown for time adjustment. The ceramic strap showcases a navy hue that uplifts the look of the timepiece. Besides, it is finished with a deployment clasp that provides a secure fit on the wrist.",
            date: new Date(2020, 7, 14),
            price: 360000,
      image: 'https://cdn.pixabay.com/photo/2020/12/04/16/15/watch-5803619__340.jpg',
        },
    {
            name: "Shampoo",
            des: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
            date: new Date(2021, 8, 8),
            price: 360,
      image: 'https://img.freepik.com/free-photo/shampoo-bottle-butterfly-pea-flower-put-white-wooden-background_1150-28107.jpg?size=626&ext=jpg&ga=GA1.2.482173369.1648044063',
        },
    {
            name: "Chair",
            des: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web pag",
            date: new Date(2019, 1, 30),
            price: 1400,
      image: 'https://img.freepik.com/free-photo/blue-dining-room-chair-room-with-gray-walls_181624-30430.jpg?size=626&ext=jpg&ga=GA1.2.482173369.1648044063',
        },
    ];

  const [productLists, setProductList] = useState([]);
  const [year,setYear] = useState(null);
  useEffect(()=>{
    setProductList(ALL_PRODUCTS);
   
  },[])

  const newProductAdded = function(productLists){
    setProductList(demoFunc =>{
      return [productLists, ...demoFunc]
    })
  }

  const onChangeYear = (params)=>{
    setYear(params);
    
  }

  return (
    <div className='productsMainWrap'>
      <div className='productsItems'>
        <div className='topBar'>
          <h2>Products</h2>
          {
            productLists.length>0 &&  <ItemDateFilter productListItems = {productLists} selectYear = {onChangeYear} year={year} />

          }
          {
            productLists.length>0 && <ProductItems productListItems={productLists} year={year}/>
          }
         </div>
         
        </div>
        <div className='productsEnteryWrapper'>
        <AddProduct onNewProductAdded={newProductAdded}/>
      </div>   
    </div>
  );
}





/*ProductItems.js*/
import Items from "./Items";
import ItemDateFilter from "../../ItemDateFilter";
import { useEffect, useState } from "react";

export default function ProductItems(props) {
    
    return (
        <div className="productItemsWrapper">
            {props.productListItems.map(function (items) {
                 const month = items.date.getMonth();
                 const day = items.date.toLocaleString("en-US", { day: "2-digit" });
                 const year = items.date.getFullYear();
                 if(props.year==year){
                    return (
                        <Items
                            productName={items.name}
                            productDescription={items.des}
                            productPrice={items.price}
                            productDate={items.date}
                            productImage={items.image}
                        />
                    );
                 }
                 if(props.year==null){
                    return (
                        <Items
                            productName={items.name}
                            productDescription={items.des}
                            productPrice={items.price}
                            productDate={items.date}
                            productImage={items.image}
                        />
                    );
                 }
                 
                    
                
            })}          
        </div>
    );
}



/*ItemDateFilter.js*/

import { useState } from "react"
export default function ItemDateFilter(props){
    const [filterValue, setFilterValue] = useState('2022');
    const Year = [2019,2020,2021,2022];
    function onFilterDateValue(event){
      props.selectYear(event.target.value)                    
    }
    return(
        <div>
            <select onChange={onFilterDateValue}>                                
               {
                   Year.map(y=>{
                       if(y==props.year){
                            return <option value={y} selected>{y}</option>
                       }
                       if(y!=props.year){
                         return <option value={y}>{y}</option>
                       }
                   })
               }
            </select>
        </div>
    )
}