الفلترة بواسطة تقييم منتج محدد

محمود سعداوي2 · 15 ديسمبر 2022

السلام عليكم.

أريد القيام بفلترة حسب التقييم (تقييم المنتج في شكل star rating)

Capture.JPG.e5ffd036c186fbfae862a770811cc659.JPG

الكود الذي قمت به:

import '../styles/App.css';
import Header from './Header'
import Aside from './Aside'
import Product from './Product'
import data from './data'
import {useState} from 'react'

function App() {
  const [checked, setChecked] = useState([])
  const [numLikes, setNumLikes] = useState(0)

  // define products categories
  const categories = data.reduce(
		(acc, elem) =>
			acc.includes(elem.category) ? acc : acc.concat(elem.category),
		[]
  )
  const handleCheck = (event) => {
    if (checked.includes(event.target.value)) {  
      let updated = checked.filter(item => item !== event.target.value) 
      setChecked(updated) 
    } else {
      let updated = [...checked, event.target.value]
      setChecked(updated)
    }
  }

  // add To Favorites
  const handleLike = (el) => {
    if (el.target.className.includes("toggle-like-btn-icon")) {
      setNumLikes(numLikes - 1)
      el.target.classList.toggle('toggle-like-btn-icon')
    } else {
      setNumLikes(numLikes + 1)
      el.target.classList.toggle('toggle-like-btn-icon')
    }
  }

  // filter by rating
  const [currentValue, setCurrentValue] = useState(0);
  const handleRateClick = value => {
    setCurrentValue(value)
    filterByRating()
  }
  const filterByRating = () =>{
    // console.log(currentValue);
    let filtered = data.filter(prod => Math.round(prod.rate) === currentValue)
    setChecked(filtered)
    console.log(filtered);
  }

  return (
    <div className="App">
      <Header
        numLikes = {numLikes}
      />
      <div className='main'>
        <Aside
          categories = { categories }
          handleCheck = {handleCheck}
          handleRateClick = {handleRateClick}
          currentValue = {currentValue}
        />
        {
          <div className='products-section'>
            {
              data.map(product => 
                checked.length === 0
                 ? (
                <Product
                  key = {product.id}
                  id = {product.id}
                  title = {product.title}
                  img = {product.img}
                  price = {product.price}
                  rating = {product.rate}
                  handleLike = {handleLike}
                />
                ) : checked.includes(product.category)
                ? (
                         <Product
                             key = {product.id}
                             id = {product.id}
                             title = {product.title}
                             img = {product.img}
                             price = {product.price}
                             rating = {product.rate}
                         />
                  ) : []
              )
            }
          </div>
        }
      </div>
    </div>
  );
}

export default App;

شكرا على المساعدة.

عمر قره محمد · 15 ديسمبر 2022

ماهي المشكلة التي تواجهها تحديدا

محمود سعداوي2 · 15 ديسمبر 2022

بتاريخ 3 دقائق مضت قال عمر قره محمد:

ماهي المشكلة التي تواجهها تحديدا

عندما أضغط على النجمة الثالثة مثلا لا تظهر المنتجات التي تقييمها يكون ثلاث نجمات

عمر قره محمد · 15 ديسمبر 2022

بتاريخ 35 دقائق مضت قال محمود سعداوي:

عندما أضغط على النجمة الثالثة مثلا لا تظهر المنتجات التي تقييمها يكون ثلاث نجمات

على ما يبدو ان المشكلة بسبب كون ال state لمسماة filtered تستخدم من اجل الـ category فقط وبالتالي فلا تستطيع استخدامها من اجل التقييم.

وإذا اردت تطبيق فكرة النجوم يجب انشاء state جديدة ولتكن stars :

const [stars, setStars] = useState(-1);

وان تعدل الوظيفة لتصبح :

  const filterByRating = () =>{
       setStars(currentValue)
  }

ونضيف الوظيفة التالية والخاصة بعملية الفلترة :

const filterTheData = () => {
    const filteredByCategory = checked.length === 0 ?
          data :
          data.filter(product => checked.includes(product.category));
    const filteredData = stars === -1 ?
          filteredByCategory     : 
          filteredByCategory.filter(product => Math.round(product.rate) === stars);
    return filteredData;
}

وبدلاً من الشروط التي كنا قد وضعنا في الـ return نبدلها للشكل التالي :

 return (
    <div className="App">
      <Header
        numLikes = {numLikes}
      />
      <div className='main'>
        <Aside
          categories = { categories }
          handleCheck = {handleCheck}
          handleRateClick = {handleRateClick}
          currentValue = {currentValue}
        />
        {
          <div className='products-section'>
            {
              filterTheData().map(product =>                
                <Product
                  key = {product.id}
                  id = {product.id}
                  title = {product.title}
                  img = {product.img}
                  price = {product.price}
                  rating = {product.rate}
                  handleLike = {handleLike}
                />              
            }
          </div>
        }
      </div>
    </div>
  );

محمود سعداوي2 · 15 ديسمبر 2022

بتاريخ 2 ساعات قال عمر قره محمد:

على ما يبدو ان المشكلة بسبب كون ال state لمسماة filtered تستخدم من اجل الـ category فقط وبالتالي فلا تستطيع استخدامها من اجل التقييم.

وإذا اردت تطبيق فكرة النجوم يجب انشاء state جديدة ولتكن stars :


const [stars, setStars] = useState(-1);

وان تعدل الوظيفة لتصبح :


  const filterByRating = () =>{
       setStars(currentValue)
  }

ونضيف الوظيفة التالية والخاصة بعملية الفلترة :


const filterTheData = () => {
    const filteredByCategory = checked.length === 0 ?
          data :
          data.filter(product => checked.includes(product.category));
    const filteredData = stars === -1 ?
          filteredByCategory     : 
          filteredByCategory.filter(product => Math.round(product.rate) === stars);
    return filteredData;
}

وبدلاً من الشروط التي كنا قد وضعنا في الـ return نبدلها للشكل التالي :


 return (
    <div className="App">
      <Header
        numLikes = {numLikes}
      />
      <div className='main'>
        <Aside
          categories = { categories }
          handleCheck = {handleCheck}
          handleRateClick = {handleRateClick}
          currentValue = {currentValue}
        />
        {
          <div className='products-section'>
            {
              filterTheData().map(product =>                
                <Product
                  key = {product.id}
                  id = {product.id}
                  title = {product.title}
                  img = {product.img}
                  price = {product.price}
                  rating = {product.rate}
                  handleLike = {handleLike}
                />              
            }
          </div>
        }
      </div>
    </div>
  );

شكرا أخي

هناك مشكل بسيط هو أن تفعيل الفلترة بواسطة تقييم النجوم يحدث بعد النقر من المرة الثانية

عمر قره محمد · 15 ديسمبر 2022

بتاريخ الآن قال محمود سعداوي:

شكرا أخي

هناك مشكل بسيط هو أن تفعيل الفلترة بواسطة تقييم النجوم يحدث بعد النقر من المرة الثانية

هل يمكنك مشاركة ملف الـ src حتى استطيع الاطلاع على المشكلة.

محمود سعداوي2 · 15 ديسمبر 2022

بتاريخ 1 دقيقة مضت قال عمر قره محمد:

هل يمكنك مشاركة ملف الـ src حتى استطيع الاطلاع على المشكلة.

تفضل

src.zip

عمر قره محمد · 15 ديسمبر 2022

لحل المشكلة عدل الكود الخاص بالوظيفة handleRateClick إلى الشكل التالي :

const handleRateClick = value => {
  setCurrentValue(value)
  setStars(value)
}

الفلترة بواسطة تقييم منتج محدد

السؤال

محمود سعداوي2

7 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

محمود سعداوي2

عمر قره محمد

محمود سعداوي2

عمر قره محمد

محمود سعداوي2

عمر قره محمد

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية