الفلترة المتعدد بواسطة ريآكت

محمود سعداوي2 · 10 مارس 2023

السلام عليكم

في المشروع التالي:

Capture.JPG.7339f5fbf1a97514707cf349476c8ba4.JPG

قمت بالبحث عن المأكولات عبر كتابة الإسم المناسب.

ثم أردت فلترة هذه المأكولات بواسطة checkbox

قمت بكتابة الكود التالي

const [selected, setSelected] = useState([])
  const categories = meals.map(meal => meal.category)
                          .reduce((acc,item) => 
                            (acc.includes(item) ? acc : [...acc,item])
                            ,[])
  const handleCheck = (e) => {
    const {value, checked} = e.target;
    if (checked === true) {
      setSelected(pre=>[...pre,value])
    }else {
      setSelected(pre=> [...pre.filter(item => item !== value)])
    }
  }
  const filtered = meals.filter(item => selected.includes(item.category))
  console.log(filtered)

في هذه الحالة تمكنت من التعرف على filtered و ظهرت في الكونسول دون مشكل.

ثم قمت ب:

const filtered = meals.filter(item => selected.includes(item.category))
  setMeals(filtered);

هنا ظهرت رسالة الخطأ التالية

Capture.JPG.8ca0358b274ac26d23b48b541402244b.JPG

ملاحظة: قمت بجلب البيانات بواسطة الكود التالي

  // Fetch Meals API
  const getMeals = async () => {
    const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s')
    const data = await response.json()
    const findMeals = data.meals.map(meal => (
      {
        id: meal.idMeal,
        title: meal.strMeal,
        image: meal.strMealThumb,
        rate: (Math.random() * 5).toFixed(2),
        category: meal.strCategory,
        description: meal.strYoutube,
      }
    ))
    setMeals(findMeals)
  }
  useEffect(() => {
    getMeals()
  }, [])

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

Mustafa Suleiman · 10 مارس 2023

يحدث هذا الخطأ عندما يتم إعادة تقديم الصفحة مرارًا وتكرارًا بسبب تحديث الحالة في كل مرة. في حالة مشروعك أنت، عند تحديث حالة meals في setMeals(filtered) ، فيتم إعادة تقديم الصفحة وإعادة تنفيذ الكود بالكامل.

هذا يعني أنه يتم إعادة استدعاء الدالة getMeals() في useEffect() وإعادة جلب البيانات مرة أخرى، ثم تحديث meals وإعادة التقديم مرة أخرى وهكذا.

لحل هذه المشكلة، يمكنك وضع استدعاء getMeals() في حالة مستقلة عن حالة selected. يمكنك إنشاء دالة فرعية في مكان آخر، على سبيل المثال في الأعلى من المكون، واستخدامها لجلب البيانات. يمكنك أيضًا إضافة شرط للتحقق مما إذا كانت selected فارغة أو لا لتحديث meals بشكل صحيح عند الحاجة فقط.

على سبيل المثال:

const [meals, setMeals] = useState([]);
const [selected, setSelected] = useState([]);

const fetchMeals = async () => {
const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s')
const data = await response.json()
const findMeals = data.meals.map(meal => (
{
id: meal.idMeal,
title: meal.strMeal,
image: meal.strMealThumb,
rate: (Math.random() * 5).toFixed(2),
category: meal.strCategory,
description: meal.strYoutube,
}
))
setMeals(findMeals)
}

const handleCheck = (e) => {
const {value, checked} = e.target;
if (checked === true) {
setSelected(pre=>[...pre,value])
} else {
setSelected(pre=> [...pre.filter(item => item !== value)])
}
}

useEffect(() => {
fetchMeals();
}, []);

useEffect(() => {
const filtered = meals.filter(item => selected.includes(item.category))
setMeals(filtered);
}, [selected]);

ملاحظة: يمكنك أيضًا استخدام useCallback() لتجنب إعادة تحديث دالة fetchMeals() عند إعادة تقديم الصفحة Re-render.

قواعد استعمال الخطافات في React

الأسئلة الشائعة حول الخطافات في React

محمود سعداوي2 · 11 مارس 2023

بتاريخ 11 ساعة قال Mustafa Suleiman:
يحدث هذا الخطأ عندما يتم إعادة تقديم الصفحة مرارًا وتكرارًا بسبب تحديث الحالة في كل مرة. في حالة مشروعك أنت، عند تحديث حالة meals في setMeals(filtered) ، فيتم إعادة تقديم الصفحة وإعادة تنفيذ الكود بالكامل.

هذا يعني أنه يتم إعادة استدعاء الدالة getMeals() في useEffect() وإعادة جلب البيانات مرة أخرى، ثم تحديث meals وإعادة التقديم مرة أخرى وهكذا.

لحل هذه المشكلة، يمكنك وضع استدعاء getMeals() في حالة مستقلة عن حالة selected. يمكنك إنشاء دالة فرعية في مكان آخر، على سبيل المثال في الأعلى من المكون، واستخدامها لجلب البيانات. يمكنك أيضًا إضافة شرط للتحقق مما إذا كانت selected فارغة أو لا لتحديث meals بشكل صحيح عند الحاجة فقط.

على سبيل المثال:
const [meals, setMeals] = useState([]);
const [selected, setSelected] = useState([]);

const fetchMeals = async () => {
const response = await fetch('https://www.themealdb.com/api/json/v1/1/search.php?s')
const data = await response.json()
const findMeals = data.meals.map(meal => (
{
id: meal.idMeal,
title: meal.strMeal,
image: meal.strMealThumb,
rate: (Math.random() * 5).toFixed(2),
category: meal.strCategory,
description: meal.strYoutube,
}
))
setMeals(findMeals)
}

const handleCheck = (e) => {
const {value, checked} = e.target;
if (checked === true) {
setSelected(pre=>[...pre,value])
} else {
setSelected(pre=> [...pre.filter(item => item !== value)])
}
}

useEffect(() => {
fetchMeals();
}, []);

useEffect(() => {
const filtered = meals.filter(item => selected.includes(item.category))
setMeals(filtered);
}, [selected]);
ملاحظة: يمكنك أيضًا استخدام useCallback() لتجنب إعادة تحديث دالة fetchMeals() عند إعادة تقديم الصفحة Re-render.

قواعد استعمال الخطافات في React

الأسئلة الشائعة حول الخطافات في React