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

معالجة مشكل في فلترة مصفوفة في رياكت

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

السؤال

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

قمت بإنشاء رابط بواسطته أتمكن من التنقل من صفحة 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);

لم يظهر شيئا في الكونسل.

شكرا لكم.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

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

يمكنك حل المشكلة بتعديل الوظيفة 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 وإذا لم تكن على دراية بها فأنصحك بالتعلم عنها واستخدامها.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 ساعة قال عمر قره محمد:

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

تفضل

package.zippackage-lock.zippublic.zipsrc.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

عفوا أخي لقد قمت بالتعديل التالي في 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.

هل يوجد مقال توضيحي لو سمحت

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...