كيف يتم حقن بيانات الجدول هنا باستعمال الدالة map?

Mohamed Lamin Mahmoudi · 17 فبراير 2023

function Form (){
    const [val ,setVal]=useState('');
     const [tasks ,setTsks]=useState([]);

   const handelAddButton=(e)=> {
    setVal(e.target.value);
       
       }
       const SubmitHandeler=()=>{
        let spce= /[^" "]/g;      
        if(spce.test(val)){
      
          setTsks([...tasks,
            {
            text:val , completed:false ,id: Math.random()*1000
        }])
        setVal("");
        }
      
       }
       return(
        <div className='container'>
        <div className='inbuts'>
          <input 
          value={val}
          required
          onChange={handelAddButton}
          className='inb'  type={'text'}></input>
          <button 
          id='add'
          onClick={SubmitHandeler}
          > <i >Add</i></button>               
          <input className='inb' type={''}></input>
          <button id='serch'>Search</button>
        </div>
       <Tasks  tasks={tasks}></Tasks>
        
   </div>

       )
   
}
export default Form;

المكون form.js

function Tasks({tasks}){
    /*
    tasks[{text:gvjhvh},{text:fvgvhv}]
    */
    return (
        <div className='list-notes'>
        {tasks.map((task)=>{
            return (
                <ul className='container-list'>
            <li><h5>{task.text} </h5> </li>
            <button id='Del'>Delete</button>
          </ul>
            )
        }  
       ) }
        </div>
    )
}

المكون Tasks

أريد أن أفهم بعد أن تمرر بيانات الجدول عبر الخاصية task={tasks} ومن ثم تتسقبل في المكون Task نقوم بوضع الدالة map لعرض جميع بيانات الجدول بعد اضافة كل ملاحظة

اذن لنفترض ان جدول الملاحظات هو

task[
{text:jhkj, id:44},
{text:bmb, id:446},
  
 ]

اذن من المفترض عندما اعرض الملاحظة الاولى ثم أضيف الملاحظة الثانية تقوم الدالة map باعادة عرض الملاحظة الاولى ثم تعرض الثانية لتعرض هكذا

task[
{text:jhkj, id:44},
{text:jhkj, id:44},
{text:bmb, id:446},
  
 ]

Sam Ahw · 17 فبراير 2023

أي جزء غير واضح تحديداً بالنسبة لك؟ الدالة map هي دالة في لغة جافاسكريبت يتم تنفيذها على المصفوفات كنوع من الحلقات التكرارية بحيث تسمح لنا تنفيذ بعض الشيفرات البرمجية بالنسبة لكل عنصر من عناصر هذه المصفوفة.

وهنا في المثال لديك، يتم استخدامها على المصفوفة tasks بحيث تقوم بإظهار عناصر المصفوفة وعندما يتم إضافة أي عنصر جديد إلى المصفوفة tasks سيتم إظهاره ضمن واجهة المستخدم بما يتوافق مع آلية عمل React.

لكن يوجد بعض الأخطاء البسيطة في هيكلية الشيفرة البرمجية، بشكل عام يجب وضع الحلقة التكرارية على مستوى عنصر القائمة أي li بدلاً من ul، لأنه من غير المنطقي تكرار القوائم ul كاملة بدلاً من تكرار العناصر فقط. فتصبح كالتالي:

<div className='list-notes'>
  <ul className='container-list'>
        {tasks.map((task)=>{
            return (
            <li>
              <h5>{task.text} </h5> 
              <button id='Del'>Delete</button>
            </li>
            )
        }  
       ) }
     </ul>
        </div>

مع العلم أنه لن يسبب خطأ برمجي، وإنما سيسهّل عليك فهم الشيفرة البرمجية وترتيبها بشكل منطقي أكثر.

Mohamed Lamin Mahmoudi · 18 فبراير 2023

بتاريخ 9 ساعة قال Sam Ahw:
أي جزء غير واضح تحديداً بالنسبة لك؟ الدالة map هي دالة في لغة جافاسكريبت يتم تنفيذها على المصفوفات كنوع من الحلقات التكرارية بحيث تسمح لنا تنفيذ بعض الشيفرات البرمجية بالنسبة لكل عنصر من عناصر هذه المصفوفة.

وهنا في المثال لديك، يتم استخدامها على المصفوفة tasks بحيث تقوم بإظهار عناصر المصفوفة وعندما يتم إضافة أي عنصر جديد إلى المصفوفة tasks سيتم إظهاره ضمن واجهة المستخدم بما يتوافق مع آلية عمل React.

لكن يوجد بعض الأخطاء البسيطة في هيكلية الشيفرة البرمجية، بشكل عام يجب وضع الحلقة التكرارية على مستوى عنصر القائمة أي li بدلاً من ul، لأنه من غير المنطقي تكرار القوائم ul كاملة بدلاً من تكرار العناصر فقط. فتصبح كالتالي:
<div className='list-notes'>
  <ul className='container-list'>
        {tasks.map((task)=>{
            return (
            <li>
              <h5>{task.text} </h5> 
              <button id='Del'>Delete</button>
            </li>
            )
        }  
       ) }
     </ul>
        </div>
مع العلم أنه لن يسبب خطأ برمجي، وإنما سيسهّل عليك فهم الشيفرة البرمجية وترتيبها بشكل منطقي أكثر.

أريد أن أفهم آلية الإضافة في هذا المثال

كيف يتم إظهار كل عنصر بعد إضافته في الجدول ولماذا لا يحدث تكرار مثلا لأن البيانات موجودة في الجدول والجدول به كافة العناصر

وما أعرفه أن الدالة map تعمل loop على كامل عناصر الجدول في كل مرة

Sam Ahw · 18 فبراير 2023

بتاريخ منذ ساعة مضت قال Mohamed Lamin Mahmoudi:

أريد أن أفهم آلية الإضافة في هذا المثال

كيف يتم إظهار كل عنصر بعد إضافته في الجدول ولماذا لا يحدث تكرار مثلا لأن البيانات موجودة في الجدول والجدول به كافة العناصر

وما أعرفه أن الدالة map تعمل loop على كامل عناصر الجدول في كل مرة

آلية الإضافة تتم من خلال useState التابعة لمكتبة React والتي بدورها تتحكم بحالة القيم والعناصر في شجرة DOM ضمن المتصفح وهذا أساس عمل مكتبة React.

أما القيم الموجودة في الجدول، بما أنها أيضاً موجودة ضمن شجرة DOM وطباعة القيم تعتمد على حالة المصفوفة tasks، فعند تحديث هذه المصفوفة ستعمل مكتبة React على تحديث عناصر الواجهة المعتمدة على هذه القيمة وبالتالي تحديث الجدول الذي يظهر العناصر من خلال الدالة map. ولن يحدث تكرار لأن React قادرة على مقارنة القيمة القديمة والجديدة للحالة أو لشجرة DOM وبالتالي تستطيع تحديد العناصر الجديدة فقط لإضافتها.