تصحيح الأخطاء البرمجية في رمز React وعرض قائمة المستخدمين

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

• في السطر الأول، استخدم "className" بدلاً من "ClassName" إذا كنت تريد تعيين صفات الفئة.
• في السطر الثاني، يجب أن تكون قائمة المستخدمين داخل العلامات القوسية "[]" بدلاً من "{}".
• في السطر الثالث، يجب أن تكون الأقواس الدائرية بين الأقواس الزوجية "()" بدلاً من "}".
• في السطر الرابع، تحتاج إلى تحديد اسم العنصر "key" لكل عنصر في قائمة المستخدمين أو سيتم إصدار تحذير في وحدة المعالجة المركزالتعديل المقترح للرمز هو كالتالي:

<div className='container'>
  <div className='row'>
    {this.state.users.map((ele) =>
      <Users key={ele.id} userinfo={ele} delete={this.state.delete} />
    )}
  </div>
</div>

const users = [
  {
    name: 'angular',
    id: 1,
    examresult: true
  },
  {
    name: 'html',
    id: 2,
    examresult: false,
  },
  {
    name: 'php',
    id: 3,
    examresult: false,
  },
  {
    name: 'laravel',
    id: 4,
    examresult: true,
  }
];

class Users extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.userinfo.name}</p>
        <p>{this.props.userinfo.id}</p>
        <p>{this.props.userinfo.examresult}</p>
        <button onClick={() => this.props.delete(this.props.userinfo.id)}>Delete</button>
      </div>
    );
  }
}

تم تغيير اسم العنصر "ClassName" إلى "className" في السطر الأول. تم تحديد العنصر "key" لكل عنصر في قائمة المستخدمين لتجنب إصدار تحذيرات في وحدة المعالجة المركزية. تم إنشاء عنصر فرعي يسمى "Users" لعرض معلومات المستخدم وزر الحذف. تم تمرير "ele.id" كمعرف للمستخدم لدالة الحذف. يمكنك استخدام هذا الرمز كأساس لتصحيح أخطاء الرمز الخاص بك.

أرجو منك إرفاق الكود في سؤالك من خلال الضغط على الكود <> عند كتابة السؤال.

ومن الصعب تحديد بالضبط ما هي المشكلة التي تواجهها في رمز React الذي قدمته، حيث يجب تحديد ما الذي تريد فعله وشرحه بالضبط، وأيضًا توفير مجلد المشروع إن أمكن.

ومع ذلك، هناك بعض الأخطاء الواضحة في الرمز التي يمكن تصحيحها:

في البداية، يجب أن تتأكد من تشغيل كود React داخل وحدة الإرسال الصحيحة. يجب أن يتم وضع الكود داخل مكون React مثل class App extends React.Component ويتم استدعائه في ReactDOM.render().

وأيضًا عليك باستخدام className بحرف c صغير وليس كبير C

والدالة map التي تستخدمها لتكرار this.state.users غير صحيحة، حيث يجب أن تكون هناك قوسين مستديرين بعد map لتحديد الدالة المراد تنفيذها على كل عنصر.، مثلاً:

this.state.users.map((ele) => { // code }).

أيضًا يجب أن يكون لديك عناصر users صحيحة داخل المصفوفة.

حالياً، لديك قوسين مفتوحين بدون أي شيء داخلهما قبل العنصر الأول وبعد العنصر الثاني في المصفوفة يجب أن تتأكد من تنسيق البيانات بشكل صحيح.

هذه هي الأخطأ التي في الكود

1. الأول: يوجد خطأ في كتابة `ClassName` بدلاً من `className` في العنصر الثاني `div`، يجب تصحيحها.

2. الثاني: يوجد خطأ في الاقواس في الدالة `map`، وكذلك في إغلاق العنصر `users`، يجب تعديلهما ليصبح الكود كالتالي:

<div className='container'>
  <div className='row'></div>
  {this.state.users.map((ele) => (
    <users userinfo={ele} delete={this.state.delete} />
  ))}
  [
    {
      name: 'angular',
      id: 1,
      discreption: '',
      examresult: true
    },
    {
      name: 'html',
      id: 2,
      discreption: '',
      examresult: false
    },
    {
      name: 'php',
      id:3,
      discreption: '',
      examresult: false
    },
    {
      name: 'laravel',
      id: 4,
      discreption: '',
      examresult: true
    }
  ]
</div>

3. الثالث: يوجد خطأ في كتابة `name` بدلاً من `userinfo` في العنصر `users`، يجب تصحيحها.

4. الرابع: يوجد خطأ في كتابة `discreption`، يجب تصحيحها إلى `description`.

بعد التعديلات، يجب أن يبدو الكود كالتالي:

<div className='container'>
  <div className='row'></div>
  {this.state.users.map((ele) => (
    <users userinfo={ele} delete={this.state.delete} />
  ))}
  [
    {
      name: 'angular',
      id: 1,
      description: '',
      examresult: true
    },
    {
      name: 'html',
      id: 2,
      description: '',
      examresult: false
    },
    {
      name: 'php',
      id: 3,
      description: '',
      examresult: false
    },
    {
      name: 'laravel',
      id: 4,
      description: '',
      examresult: true
    }
  ]
</div>

يوجد عدة أخطاء في رمز React الذي قدمته. هنا هو الرمز المصحح: 

import React from 'react';

class UserList extends React.Component {
  state = {
    users: [
      {
        name: 'angular',
        id: 1,
        description: '',
        examResult: true
      },
      {
        name: 'html',
        id: 2,
        description: '',
        examResult: false
      },
      {
        name: 'php',
        id: 3,
        description: '',
        examResult: false
      },
      {
        name: 'laravel',
        id: 4,
        description: '',
        examResult: true
      }
    ]
  };

  render() {
    return (
      <div className='container'>
        <div className='row'>
          {this.state.users.map((user) => (
            <User
              key={user.id}
              userinfo={user}
              delete={this.state.delete}
              name={user.name}
            />
          ))}
        </div>
      </div>
    );
  }
}

const User = (props) => {
  return (
    <div>
      <p>{props.userinfo.name}</p>
      {/* Add other user information here */}
    </div>
  );
};

export default UserList;

• تم استيراد مكون React من react.
• تم إنشاء مكون UserList بشكل صحيح وتعيين الحالة الابتدائية للمستخدمين.
• تم استدعاء دالة map بشكل صحيح لعرض قائمة المستخدمين.
• تم إنشاء مكون User لعرض تفاصيل المستخدم.
• تم إصلاح الأسماء العربية للخصائص والمتغيرات.
• تم تصحيح الأشكال النحوية في الرمز مثل استخدام className بدلاً من ClassName واستخدام الأقواس والأقواس المزدوجة بشكل صحيح.

يرجى ملاحظة أن الرمز المصحح يفترض أن لديك مكون منفصل لعرض تفاصيل المستخدم (User) ويتوقف عليك إضافة الأكواد المناسبة لعرض التفاصيل المطلوبة في المكون User.