شرح كود React

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

يبدو أن الكود يستخدم الدالة useState في React. هذه الدالة تستخدم لإضافة حالة محلية إلى العنصر الذي يتم إنشاؤه. يتم استخدامها عادةً مع الدالة useEffect لإعادة تقديم العنصر عند تغيير الحالة المحلية.

في هذا المثال، يتم تعريف متغير todos باستخدام useState. يتم تحديث قيمة هذا المتغير باستخدام setTodos. في كل مرة يتم فيها تحديث todos، يتم تصفية المصفوفة بناءً على showTodo. إذا كان showTodo هو ‘active’، فسيتم عرض المهام التي لم تكتمل بعد، وإذا كان showTodo هو ‘finish’، فسيتم عرض المهام التي تم إكمالها.

إذا لم يكن الشرح السابق كافياً قم بمشاركة الكود الخاص بك بالكامل.

 يستخدم شرط "if" لتغيير قيمة متغير يسمى "todos" استنادًا إلى قيمة متغير آخر يسمى "showTodo".

و تعريف "todos" باستخدام useState() ، وهو Hook خطاف يستخدم في React لإنشاء وإدارة حالة المكونات.

وإذا كانت قيمة "showTodo" تساوي 'active' ، تستخدم دالة "filter()" على "todos" لاستبعاد العناصر التي لديها "status" معقمة (false) والحفاظ فقط على العناصر التي لديها "status" غير معقمة (true).

وتعدل قيمة "todos" لتكون هذا النتيجة ومن ثم يتم طباعتها في وحدة التحكم باستخدام console.log().

باختصار، ما يحدث هو تصفية وتعديل قيمة "todos" بناءً على قيمة "showTodo" واستخدام الدالة "filter()" للحصول على مجموعة من العناصر المطلوبة، والتي تعتمد على حالة "status" لكل عنصر في "todos".

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

زيادة على ما أشار اليه المدربون، 

ففي 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)

فتكون القيم المصفاة هي القيم المعروضة،

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

 

شكرا هل ممكن توضح اكثر لم افهم جيدا لتجنب هذا الخطا مرة اخرى

بتاريخ الآن قال 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.

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

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