كيف تدير النماذج الديناميكية التي تحتوي على مصفوفة حقول متغيرة (Dynamic Field Arrays)؟

الإجابة المختصرة

نستخدم خطاف useFieldArray في React Hook Form لإضافة وحذف وتحريك الحقول ديناميكياً مع تزويد كل حقل بمفتاح فريد (Key) ثابت ومخصص.

الشرح

تتطلب نماذج الفواتير وقوائم المهام إضافة حقول أو إزالتها أثناء ملء النموذج. استخدام useState التقليدي لمصفوفة من الكائنات يسبب مشاكل في حفظ التركيز وأداء بطيء عند الحذف. يوفر useFieldArray دوال append و remove و move مسبقة الضبط مع معالجة هوية المفاتيح عبر field.id التلقائي.

مثال بالكود

import { useForm, useFieldArray } from 'react-hook-form';

function InvoiceForm() {
  const { control, register } = useForm();
  const { fields, append, remove } = useFieldArray({ control, name: 'items' });

  return (
    <div>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.name`)} />
          <button type="button" onClick={() => remove(index)}>حذف</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '' })}>إضافة صنف</button>
    </div>
  );
}

أخطاء شائعة

• استخدام index المصفوفة كـ key لعناصر الحقول الديناميكية، مما يسبب اختلال محتوى الحقول وقيمها عند حذف صف وسطي.

أسئلة متابعة

• لماذا تعتبر مكتبة React Hook Form (RHF) متفوقة في الأداء مقارنة بنماذج Formik التقليدية؟

المصادر

• React Hook Form docs — useFieldArray