شرح أساسيات رياكت

في الواقع هذه شيفرة تحتوي على العديد من الأخطاء.

أولا:

في رياكت نحن عندما نريد تحديث اي معلومات على الواجهة نستخدم ما يسمى الربط ثنائي الاتجاه Two Way binding وتم شرحها لك مسبقا.

وهو عندما نريد نحدث البيانات في تطبيق لا نحدثها مباشرة بل نحدثها عن طريق هذه الخاصية.

ويتم تحقيق هذه الخاصية برياكت باستخدام useState وما فعلته انت خاطئ تماما فالمعلومات التي سوف تتحدث لا يتم تخزينها بمتغير عادي بل داخل المتغير الخاص بالخطاف useState.

ثانيا انت عندما عملت خاصية الحذف يجب عليك تحديد اي عنصر سوف تحذفه وانت لم تحدد اي شيء فكتابتك للجملة خاطئة.

{maytastlist}
<button onClick={deleteClick}>clear</button>

فكيف يمكن لتطبيقك التعرف اي من الادوات تريد مسحها فيجب ان يكون الزر مرتبط بالاداة ايضا.

ثالثا في دالة الحذف انت لم ترجع شيئا والذي كان يجب ان يتم تحديثة باستخدام الخطاف useState.

ساكتب لك الشيفرة واشرح لك خطوة بخطوة لكن ارجو التركيز.

import React, { useState } from "react";

function App() {
  const [test, setTest] = useState([
    "item1",
    "item2",
    "item3",
    "item4",
  ]);

  const deleteClick = (index) => {
    const newDelete = [...test];
    newDelete.splice(index, 1);
    setTest(newDelete);
  };

  return (
    <div>
      <ul>
        {test.map((item, index) => (
          <li key={item}>
            {item}
            <button onClick={() => deleteClick(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

في useState حددنا الحالة البدائية لمصفوفتنا والتي ستتغير باستمرار على حسب الضغط على الزر.

  const [test, setTest] = useState([
    "item1",
    "item2",
    "item3",
    "item4",
  ]);

ثانيا في الدالة الخاصة بالحذف ناخذ المكان بالمصفوفة كمعامل ولاحظ عندما نجدد المصفوفة بحذف عنصر منها استخدمنا setTest الخاص بالخطاف ولم نحدث مباشرة وهذا ما يسمى بالربط ثنائي الاتجاه اي عندما نحدث بالدالة الخاصة بالخطاف useState فرياكت سوف تفهم انه نريد تحديث هذا العنصر وليس مثل ال DOM حيث اننا ناخذ العنصر كما هو ونحدثه فهنا التحديث يجب علينا ان نخبر رياكت ان هذا العنصر سوف يتم تحديثه.

  const deleteClick = (index) => {
    const newDelete = [...test];
    newDelete.splice(index, 1);
    setTest(newDelete);
  };

ثالثا عندما عملنا mapping للمصفوفة لاحظ اننا اظهرنا العناصر واحدا واحدا ومعه الزر الخاص به لنحدد اي العناصر نريد الحذف.

{test.map((item, index) => (
  <li key={item}>
    {item}
    <button onClick={() => deleteClick(index)}>Delete</button>
  </li>
))}

لاحظ في الزر عملنا دالة سهمية لان رياكت لا تقبل الدوال العادية التي تاخذ معاملات داخل الاحداث هنا فلذلك نعمل دالة سهمية تستدعي الدالة التي عملناها ومررنا لها المعامل.

أولا أنت لا تستخدم useState لإداراة الحالة حيث يستخدمها React لمعرفة التغيرات التي حدثت في قيمة المتغيرات وحينها يمكنه التعامل معها وإعادة تصير (render) المكون مرة أخرى عند حدوث تغير في القيمة.

وأيضا هنا في الكود التالي أنت قمت بإنشاء زر واحد فقط ولكن الصحيح هو إنشاء زر لكل عنصر ليقوم بحذف هذا العنصر نفسه وليس حذف أول عنصر من القائمة دائما.

بتاريخ 11 ساعة قال Hxfhf Ucicic:

     <button onClick={deleteClick}>clear</button>

أيضا يجب تمرير المؤشر index الذي نريد حذف هذا العنصر لديك . حيث الدالة splice تأخذ المؤشر الذي نريد بدأ الحذف منه .

وهذا هو الكود النهائي الصحيح :

import React, { useState } from "react";

function App() {
  const [tasks, setTask] = useState([
    "item1",
    "item2",
    "item3",
    "item4",
  ]);

  const maytaskslist = tasks.map((item, index) => {
    return <li key={item}>{item} <button onClick={() => deleteClick(index)}>clear</button> </li>
  })

  const deleteClick = (item) => {

    const newDelete = [...tasks]
    newDelete.splice(item, 1)
    setTask(newDelete)
  }

  return (
    <div>
      <ul>
        {maytaskslist}
      </ul>
    </div>
  )
}


export default App;

حيث لاحظ كيف قمنا بإستخدام useState لإنشاء قائمة المهام والتي سيدير حالتها React ومع كل تغير فيها سيقوم تلقائيا بإعادة بناء المكون.