محمود_سعداوي نشر 18 ديسمبر 2022 أرسل تقرير مشاركة نشر 18 ديسمبر 2022 السلام عليكم. قمت بإنشاء رابط بواسطته أتمكن من التنقل من صفحة homePage إلى صفحة subCategoryPage وذلك باعتماد الدالة subCategoryProducts. const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) console.log(subCategoryArray); } حتى أتمكن من تمرير البيانات قمت بالإعتماد على الهوكس const [subProducts,setSubProducts] = useState([]) وبالتالي صارت الدالة subCategoryProducts const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) // console.log(subCategoryArray); setSubProducts([...subProducts,subCategoryArray]) } المشكل هنا لم يقع التعرف بتاتا على subProducts. حيث أنني عندما قمت ب: console.log(subProducts); لم يظهر شيئا في الكونسل. شكرا لكم. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 19 ديسمبر 2022 أرسل تقرير مشاركة نشر 19 ديسمبر 2022 بتاريخ 25 دقائق مضت قال محمود سعداوي: تفضل package.zip 548 B · 2 تنزيلات package-lock.zip 142.61 kB · 0 تنزيلات public.zip 4.63 kB · 0 تنزيلات src.zip 16.58 MB · 4 تنزيلات يمكنك حل المشكلة بتعديل الوظيفة subCategoryProducts إلى الشكل التالي : const subCategoryProducts = (item) => { let subCategory = item.target.innerText.toUpperCase(); localStorage.setItem("category", subCategory); }; وتقوم بإضافة الكود التالي إلى صفحة الـ SubCategory.jsx : const [filteredData, setFilteredData] = useState([]); useEffect(() => { const subCategory = localStorage.getItem("category"); let subCategoryArray = data.filter((prod) => prod.category.toUpperCase() === subCategory); setFilteredData(subCategoryArray); }, []); ولا تنسى استدعاء كل من : import { useEffect, useState } from "react"; import data from "../../components/data"; ولكن سيظل هذا عبارة عن حل سريع، حيث ان الطريقة الافضل هي استخدام الـ dynamic routes حيث تحدد الـ category باستخدام الـ route وإذا لم تكن على دراية بها فأنصحك بالتعلم عنها واستخدامها. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 19 ديسمبر 2022 أرسل تقرير مشاركة نشر 19 ديسمبر 2022 هي يمكنك مشاركة ملفات المشروع حتى استطيع الاطلاع على المشكلة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 19 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 19 ديسمبر 2022 بتاريخ 4 ساعة قال عمر قره محمد: هي يمكنك مشاركة ملفات المشروع حتى استطيع الاطلاع على المشكلة تفضل package.zippackage-lock.zippublic.zipsrc.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 19 ديسمبر 2022 الكاتب أرسل تقرير مشاركة نشر 19 ديسمبر 2022 بتاريخ 29 دقائق مضت قال محمود سعداوي: تفضل package.zip 548 B · 2 تنزيلات package-lock.zip 142.61 kB · 0 تنزيلات public.zip 4.63 kB · 0 تنزيلات src.zip 16.58 MB · 4 تنزيلات عفوا أخي لقد قمت بالتعديل التالي في SideBarMenu const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) setSubProducts([...subProducts,subCategoryArray]) } أجدد إعتذاري بتاريخ 2 دقائق مضت قال عمر قره محمد: يمكنك حل المشكلة بتعديل الوظيفة subCategoryProducts إلى الشكل التالي : const subCategoryProducts = (item) => { let subCategory = item.target.innerText.toUpperCase(); localStorage.setItem("category", subCategory); }; وتقوم بإضافة الكود التالي إلى صفحة الـ SubCategory.jsx : const [filteredData, setFilteredData] = useState([]); useEffect(() => { const subCategory = localStorage.getItem("category"); let subCategoryArray = data.filter((prod) => prod.category.toUpperCase() === subCategory); setFilteredData(subCategoryArray); }, []); ولا تنسى استدعاء كل من : import { useEffect, useState } from "react"; import data from "../../components/data"; ولكن سيظل هذا عبارة عن حل سريع، حيث ان الطريقة الافضل هي استخدام الـ dynamic routes حيث تحدد الـ category باستخدام الـ route وإذا لم تكن على دراية بها فأنصحك بالتعلم عنها واستخدامها. شكرا. لا أعرف dynamic routes. هل يوجد مقال توضيحي لو سمحت اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
قمت بإنشاء رابط بواسطته أتمكن من التنقل من صفحة homePage إلى صفحة subCategoryPage وذلك باعتماد الدالة subCategoryProducts.
const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) console.log(subCategoryArray); }
حتى أتمكن من تمرير البيانات قمت بالإعتماد على الهوكس
const [subProducts,setSubProducts] = useState([])
وبالتالي صارت الدالة subCategoryProducts
const subCategoryProducts = (item) =>{ let subCategory = item.target.innerText.toUpperCase() let subCategoryArray = data.filter(prod=> prod.category.toUpperCase() === subCategory) // console.log(subCategoryArray); setSubProducts([...subProducts,subCategoryArray]) }
المشكل هنا لم يقع التعرف بتاتا على subProducts.
حيث أنني عندما قمت ب:
console.log(subProducts);
لم يظهر شيئا في الكونسل.
شكرا لكم.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.