محمود_سعداوي نشر 15 ديسمبر 2022 أرسل تقرير مشاركة نشر 15 ديسمبر 2022 السلام عليكم. أريد القيام بفلترة حسب التقييم (تقييم المنتج في شكل star rating) الكود الذي قمت به: 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; شكرا على المساعدة. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 15 ديسمبر 2022 أرسل تقرير مشاركة نشر 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> ); 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 15 ديسمبر 2022 أرسل تقرير مشاركة نشر 15 ديسمبر 2022 ماهي المشكلة التي تواجهها تحديدا 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 15 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 15 ديسمبر 2022 بتاريخ 3 دقائق مضت قال عمر قره محمد: ماهي المشكلة التي تواجهها تحديدا عندما أضغط على النجمة الثالثة مثلا لا تظهر المنتجات التي تقييمها يكون ثلاث نجمات 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 15 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 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> ); شكرا أخي هناك مشكل بسيط هو أن تفعيل الفلترة بواسطة تقييم النجوم يحدث بعد النقر من المرة الثانية اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 15 ديسمبر 2022 أرسل تقرير مشاركة نشر 15 ديسمبر 2022 بتاريخ الآن قال محمود سعداوي: شكرا أخي هناك مشكل بسيط هو أن تفعيل الفلترة بواسطة تقييم النجوم يحدث بعد النقر من المرة الثانية هل يمكنك مشاركة ملف الـ src حتى استطيع الاطلاع على المشكلة. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 15 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 15 ديسمبر 2022 بتاريخ 1 دقيقة مضت قال عمر قره محمد: هل يمكنك مشاركة ملف الـ src حتى استطيع الاطلاع على المشكلة. تفضل src.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 15 ديسمبر 2022 أرسل تقرير مشاركة نشر 15 ديسمبر 2022 لحل المشكلة عدل الكود الخاص بالوظيفة handleRateClick إلى الشكل التالي : const handleRateClick = value => { setCurrentValue(value) setStars(value) } اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أريد القيام بفلترة حسب التقييم (تقييم المنتج في شكل star rating)
الكود الذي قمت به:
شكرا على المساعدة.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
7 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.