Issam Bourouail نشر 13 مايو 2023 أرسل تقرير مشاركة نشر 13 مايو 2023 (معدل) هل if تغير من قيمة ال todos let [todos, setTodos] = useState([]); if (showTodo === 'active') { todos = todos.filter(todo => !todo.status) console.log(todos); } else if (showTodo === 'finish') { todos = todos.filter(todo => todo.status) console.log(todos); } تم التعديل في 13 مايو 2023 بواسطة Mustafa Suleiman تعديل عنوان السؤال 3 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 13 مايو 2023 أرسل تقرير مشاركة نشر 13 مايو 2023 بتاريخ 31 دقائق مضت قال Issam Bourouail: لاكن نحن في react لا نستطيع تغير قيمة useState الى ب setState هذا هي المشكل ممكن ارفع المشروع لفهم المشكلة التي لم افهم https://github.com/issambour/React_TodoList-main المشكلة هي عند انشاء TASK جديد عندما اتواجد في الحالة active يحدف القيم الموجودة في finish و عكس صحيح يعمل تطبيق جيدا فقط عند القيمة all اظن ان المشكل في هذا الكود الموجود في الملف app ligne 37 حل المشكلة هو ان تعدل الكود الخاص بالإضافة للشكل التالي: const addtodosHandler = (todo) => { setTodos((todos) => [...todos, todo]); }; حيث ان الشكل : (todos) => [...todos, todo] يستخدم القيمة الأصلية للـ todos (غير المفلترة) بينما الشكل الخاص بك : [...todos, todo] فإنه يستخدم الـ todos التي تم التعديل عليها في الكود التالي : if (showTodo === 'active') { todos = todos.filter(todo => !todo.status) console.log(todos); } else if (showTodo === 'finish') { todos = todos.filter(todo => todo.status) console.log(todos); } 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 13 مايو 2023 أرسل تقرير مشاركة نشر 13 مايو 2023 يبدو أن الكود يستخدم الدالة useState في React. هذه الدالة تستخدم لإضافة حالة محلية إلى العنصر الذي يتم إنشاؤه. يتم استخدامها عادةً مع الدالة useEffect لإعادة تقديم العنصر عند تغيير الحالة المحلية. في هذا المثال، يتم تعريف متغير todos باستخدام useState. يتم تحديث قيمة هذا المتغير باستخدام setTodos. في كل مرة يتم فيها تحديث todos، يتم تصفية المصفوفة بناءً على showTodo. إذا كان showTodo هو ‘active’، فسيتم عرض المهام التي لم تكتمل بعد، وإذا كان showTodo هو ‘finish’، فسيتم عرض المهام التي تم إكمالها. إذا لم يكن الشرح السابق كافياً قم بمشاركة الكود الخاص بك بالكامل. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 13 مايو 2023 أرسل تقرير مشاركة نشر 13 مايو 2023 يستخدم شرط "if" لتغيير قيمة متغير يسمى "todos" استنادًا إلى قيمة متغير آخر يسمى "showTodo". و تعريف "todos" باستخدام useState() ، وهو Hook خطاف يستخدم في React لإنشاء وإدارة حالة المكونات. وإذا كانت قيمة "showTodo" تساوي 'active' ، تستخدم دالة "filter()" على "todos" لاستبعاد العناصر التي لديها "status" معقمة (false) والحفاظ فقط على العناصر التي لديها "status" غير معقمة (true). وتعدل قيمة "todos" لتكون هذا النتيجة ومن ثم يتم طباعتها في وحدة التحكم باستخدام console.log(). باختصار، ما يحدث هو تصفية وتعديل قيمة "todos" بناءً على قيمة "showTodo" واستخدام الدالة "filter()" للحصول على مجموعة من العناصر المطلوبة، والتي تعتمد على حالة "status" لكل عنصر في "todos". 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Issam Bourouail نشر 13 مايو 2023 الكاتب أرسل تقرير مشاركة نشر 13 مايو 2023 (معدل) بتاريخ 26 دقائق مضت قال عمر قره محمد: يبدو أن الكود يستخدم الدالة useState في React. هذه الدالة تستخدم لإضافة حالة محلية إلى العنصر الذي يتم إنشاؤه. يتم استخدامها عادةً مع الدالة useEffect لإعادة تقديم العنصر عند تغيير الحالة المحلية. في هذا المثال، يتم تعريف متغير todos باستخدام useState. يتم تحديث قيمة هذا المتغير باستخدام setTodos. في كل مرة يتم فيها تحديث todos، يتم تصفية المصفوفة بناءً على showTodo. إذا كان showTodo هو ‘active’، فسيتم عرض المهام التي لم تكتمل بعد، وإذا كان showTodo هو ‘finish’، فسيتم عرض المهام التي تم إكمالها. إذا لم يكن الشرح السابق كافياً قم بمشاركة الكود الخاص بك بالكامل. لاكن نحن في react لا نستطيع تغير قيمة useState الى ب setState هذا هي المشكل ممكن ارفع المشروع لفهم المشكلة التي لم افهم https://github.com/issambour/React_TodoList-main المشكلة هي عند انشاء TASK جديد عندما اتواجد في الحالة active يحدف القيم الموجودة في finish و عكس صحيح يعمل تطبيق جيدا فقط عند القيمة all اظن ان المشكل في هذا الكود الموجود في الملف app ligne 37 تم التعديل في 13 مايو 2023 بواسطة Issam Bourouail 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Adnane Kadri نشر 13 مايو 2023 أرسل تقرير مشاركة نشر 13 مايو 2023 زيادة على ما أشار اليه المدربون، ففي React لا يمكن تغيير قيمة state مباشرةً بدون استخدام دالة setState. في الكود الذي قمت بمشاركته، تم استخدام الدالة useState لإنشاء حالة todos والتي يتم تعيينها مرة واحدة فقط عند تحميل الصفحة. ثم تم استخدام if و else if لتصفية todos باستخدام دالة filter، ولكن هذا لن يغير قيمة todos في state. كفكرة، يمكنك إنشاء حالة جديدة مثل filteredTodos باستخدام useState وتخزين القيم المصفاة فيها، ومن ثم تحديث filteredTodos باستخدام setFilteredTodos عند تغيير قيمة showTodo. يمكنك تمرير filteredTodos كـ props إلى مكونات أخرى للعرض. سيحل هذا المشكلة لديك، هذا بجانب ان مثل هذا السياق: todos = todos.filter(todo => !todo.status) console.log(todos); قد يؤدي الى بعض المشاكل الغير متوقعة، قم بتصريح متغير آخر وليكن filteredTodos ليكون: let filteredTodos = todos.filter(todo => !todo.status) console.log(filteredTodos); ثم ان شئت حقن هاته القيمة كقيمة todos يمكنك استعمال setTodos لذلك، setTodos(filteredTodos) فتكون القيم المصفاة هي القيم المعروضة، 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Issam Bourouail نشر 13 مايو 2023 الكاتب أرسل تقرير مشاركة نشر 13 مايو 2023 بتاريخ 19 دقائق مضت قال عمر قره محمد: حل المشكلة هو ان تعدل الكود الخاص بالإضافة للشكل التالي: const addtodosHandler = (todo) => { setTodos((todos) => [...todos, todo]); }; حيث ان الشكل : (todos) => [...todos, todo] يستخدم القيمة الأصلية للـ todos (غير المفلترة) بينما الشكل الخاص بك : [...todos, todo] فإنه يستخدم الـ todos التي تم التعديل عليها في الكود التالي : if (showTodo === 'active') { todos = todos.filter(todo => !todo.status) console.log(todos); } else if (showTodo === 'finish') { todos = todos.filter(todo => todo.status) console.log(todos); } شكرا هل ممكن توضح اكثر لم افهم جيدا لتجنب هذا الخطا مرة اخرى 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 13 مايو 2023 أرسل تقرير مشاركة نشر 13 مايو 2023 بتاريخ الآن قال Issam Bourouail: شكرا هل ممكن توضح اكثر لم افهم جيدا لتجنب هذا الخطا مرة اخرى عند التعديل على حالة state في react فأنت بحاجة لاستخدام setState حتى تقوم بتعديل الحالة وعمل rerender للمكون. ولكن عند التعديل على الحالة state بشكل مباشر فأنت تقوم بتغيير قيمة المتغير state ولكن لا تقوم بالتعديل على الحالة التي تم إنشائها باستخدام الـ useState الاصلية. في الكود الخاص بك : if (showTodo === 'active') { todos = todos.filter(todo => !todo.status) console.log(todos); } else if (showTodo === 'finish') { todos = todos.filter(todo => todo.status) console.log(todos); } انت تقوم بالتعديل على المتغير todos مباشرةً ولذلك فإن الحالة todos لم تتأثر. ولذلك استطعنا الوصول إلى الحالة من خلال الـ parameter الخاص بالوظيفة setTodos والذي يحتوي على الحالة todos. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Issam Bourouail نشر 13 مايو 2023 الكاتب أرسل تقرير مشاركة نشر 13 مايو 2023 بتاريخ 14 دقائق مضت قال عمر قره محمد: عند التعديل على حالة state في react فأنت بحاجة لاستخدام setState حتى تقوم بتعديل الحالة وعمل rerender للمكون. ولكن عند التعديل على الحالة state بشكل مباشر فأنت تقوم بتغيير قيمة المتغير state ولكن لا تقوم بالتعديل على الحالة التي تم إنشائها باستخدام الـ useState الاصلية. في الكود الخاص بك : if (showTodo === 'active') { todos = todos.filter(todo => !todo.status) console.log(todos); } else if (showTodo === 'finish') { todos = todos.filter(todo => todo.status) console.log(todos); } انت تقوم بالتعديل على المتغير todos مباشرةً ولذلك فإن الحالة todos لم تتأثر. ولذلك استطعنا الوصول إلى الحالة من خلال الـ parameter الخاص بالوظيفة setTodos والذي يحتوي على الحالة todos. انا لم افهم لمذا هذا الكود : (todos) => [...todos, todo] كيف يستخدم القيمة الأصلية للـ todos (غير المفلترة) و هل todos... تساوي (todos) و هذا الكود : const addtodosHandler = (todo) => { setTodos( [...todos, todo]); }; كيف يستخدم الـ todos التي تم التعديل عليها في الكود ()if و لا يستخدم todos الموجودة داخل useState ال(غير المفلترة) لمذا تتغير قيمة todos عند استعمال arrow function اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد Fahmy نشر 13 مايو 2023 أرسل تقرير مشاركة نشر 13 مايو 2023 بتاريخ 2 ساعة قال Issam Bourouail: انا لم افهم لمذا هذا الكود : (todos) => [...todos, todo] كيف يستخدم القيمة الأصلية للـ todos (غير المفلترة) و هل todos... تساوي (todos) و هذا الكود : const addtodosHandler = (todo) => { setTodos( [...todos, todo]); }; كيف يستخدم الـ todos التي تم التعديل عليها في الكود ()if و لا يستخدم todos الموجودة داخل useState ال(غير المفلترة) لمذا تتغير قيمة todos عند استعمال arrow function إليك شرحًا مبسطًا بشكل نقاط مع أمثلة: - الكود الأول: (todos) => [...todos, todo] - هذا يشير إلى دالة تسمى "arrow function" تأخذ مصفوفة من المهام "todos" وعنصر جديد "todo" والتي تقوم بإرجاع مصفوفة جديدة تحتوي على المهام الحالية "todos" بالإضافة إلى المهمة الجديدة "todo". يمكن استخدام هذه الدالة لإضافة عنصر جديد إلى المصفوفة الحالية دون تغيير المصفوفة الأصلية. const todos = ['Learn React', 'Build a project']; const newTodos = (todos) => [...todos, 'Add a new task']; console.log(newTodos(todos)); // Output: ['Learn React', 'Build a project', 'Add a new task'] - الكود الثاني: - يستخدم لإضافة مهمة جديدة "todo" إلى مصفوفة المهام "todos" في React. - يستخدم الـ arrow function لإنشاء دالة جديدة تُضاف كحدث (event handler) لزر أو حدث آخر. - يستخدم "setTodos" لتحديث حالة "useState" مع مصفوفة جديدة تحتوي على "todos" الحالية بالإضافة إلى "todo". - يتم استخدام قيمة "todos" الحالية كقيمة افتراضية للمصفوفة المستخدمة في الدالة الجديدة. import React, { useState } from 'react'; function TodoList() { const [todos, setTodos] = useState(['Learn React', 'Build a project']); const addTodo = (todo) => { setTodos([...todos, todo]); }; return ( <div> <ul> {todos.map((todo) => ( <li key={todo}>{todo}</li> ))} </ul> <button onClick={() => addTodo('Add a new task')}>Add Todo</button> </div> ); } - وبالنسبة للسؤال الأخير، فإن قيمة الـ state في React تتغير عندما يتم استدعاء الدالة `setTodos()`، والتي تستخدم قيمة "todos" الحالية لتحديث الحالة الجديدة. في حالة استخدام الـ arrow function، فإنها تعامل مع القيمة الحالية للمتغير، وليس قيمة الـ state المستخدمة في الدالة `setTodos()`، ولا يتم تغيير الـ state مباشرة من الـ arrow function، ولكن يتم استخدام القيمة الحالية لتحديث الـ state. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ); } وهذه بعض المقالات للمزيد من المعلومات. React - موسوعة حسوب (hsoub.com) 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Issam Bourouail
هل if تغير من قيمة ال todos
تم التعديل في بواسطة Mustafa Suleimanتعديل عنوان السؤال
رابط هذا التعليق
شارك على الشبكات الإجتماعية
9 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.