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

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

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

شكرا

لكن ظهر مشكل آخر عند إختيار عنصر من عناصر الفلترة تختفي بقية العناصر