اذهب إلى المحتوى

السؤال

نشر

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

أريد القيام بفلترة حسب التقييم (تقييم المنتج في شكل 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;

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

Recommended Posts

  • 0
نشر
بتاريخ 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>
  );

 

  • 0
نشر
بتاريخ 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>
  );

 

شكرا أخي 

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...