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

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

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

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

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

تفضل

package.zippackage-lock.zippublic.zipsrc.zip

بتاريخ 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.

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