React Native / دليل حلول تحريري

تشخيص اختيار FlatList وعمر الصف

حدّد عيوب الهوية والتحديث السطحي وملكية الحالة مع العرض الافتراضي قبل تغيير ضبط القائمة.

وقت القراءة التقريبي: 3 دقيقةتاريخ مراجعة المحتوى

قاعدة معرفة للقراءة فقط · بلا تعليقات عامة

تعرّف على الأعراض

ينتقل الاختيار إلى سجل آخر بعد الفرز أو الإدراج في البداية، أو يتجاهل صف تغير اختيار خارجي، أو تختفي مسودة مكتوبة بعد التمرير بعيدا.

قد تبدو العناوين كلها صحيحة؛ ولذلك تفوت الصورة وحدها أن الحالة تنتمي إلى سجل منطقي غير صحيح.

افهم الأسباب المحتملة

  • تحدد مفاتيح الفهارس المواضع لا سجلات المجال. وتخالف المفاتيح المكررة أو المولدة حديثا عقد الهوية المقصود أيضا.
  • تكشف مقارنة FlatList السطحية وإزالة الصفوف خارج الشاشة اعتماديات خارجية مفقودة، أو حالة دائمة خُزنت داخل صف قابل للإزالة فقط.

أعد إنتاج الانتقال بسجل يسهل تمييزه

استخدم مجموعة مصطنعة صغيرة بمعرّفات مستقرة وعناوين مختلفة. اختر سجلا أو حرره، ثم أعد الترتيب وأدرج قبله واحذفه وعد إليه بعد مغادرة نافذة العرض. سجّل المعرّف الذي ينبغي أن يملك المسودة، لا فهرسه الحالي وحده. ميّز الهوية الخاطئة من سياسة صفحة صحيحة تمحو غير المتاح عمدا. احفظ إعادة الإنتاج المصغرة قبل تغيير windowSize أو الدفعات؛ فلا تصلح ضوابط الأداء نموذجا يسمي السجل الخطأ.

تحقّق من الهوية قبل تمرير السجلات إلى القائمة

استخدم مفتاح مجال مستقرا في keyExtractor، وارفض تكرار المعرّفات عند حدود البيانات. يبني البرنامج التشخيصي المستقل فهرسا ويكشف التصادم بدلا من استبدال سجل مشروع بصمت. قد يتغير العنوان أو يتكرر، فليس بديلا عاما للهوية. لا تولد مفاتيح عشوائية أثناء العرض لإزالة تحذير. يختبر البرنامج سياسة المفاتيح المحلية فقط؛ ولا يعرض FlatList أو يثبت توفيق React. ويظل انتقال الصف محتاجا إلى بيئة مكوّن أو هدف مجهزة.

javascript نموذج JavaScript مستقل بمدخلات محلية مصطنعة.
function indexRecords(rows) {
  const index = new Map();
  for (const row of rows) {
    if (index.has(row.id)) throw new Error('DUPLICATE_ID');
    index.set(row.id, row);
  }
  return index;
}
console.log(indexRecords([{id: 'w-7', title: 'Maps'}]).get('w-7').title);
try { indexRecords([{id: 'w-7'}, {id: 'w-7'}]); }
catch (error) { console.log(error.message); }
الناتج المتوقع
Maps
DUPLICATE_ID

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

أظهر اعتماديات العرض وملكية الحالة الدائمة

إذا اعتمدت الصفوف على معرّفات مختارة خارج data، فاستخدم قيماً لا تُعدّل في مكانها، ومرّر لقطة جديدة عند تغيرها، مع عقد extraData صريح، بدلاً من الاعتماد على إعادة إنشاء رد النداء بصورة عرضية. وتعيش المسودة الدائمة فوق الصفوف القابلة للإزالة تحت معرّف سجلها. قد يزيل العرض الافتراضي الأصلي صفا خارج الشاشة، فلا تضمن حالته المحلية الحفظ. ضع سياسة مقصودة لاختفاء عنصر أثناء التحديث وللاختيار عبر صفحات. الخيارات مستقلة؛ فلا تختار الهوية المحفوظة تلقائيا بقاء المخفي أو المحذوف مختارا.

افحص الانتقال وتغير الاعتماد والتخطيط الميسر

اختبر في البيئة المتوافقة الاختيار مع بيانات ثابتة ومعاد ترتيبها وسجل محذوف وصف يخرج من نافذة العرض ويعود. أكّد اتباع كل مسودة معرّفها وعمرها. أدرج العربية الطويلة والخط الكبير وحالتي التحديث الفارغ والفاشل. لا تصلح تمرير الارتفاع المتغير بإزاحات getItemLayout مخمنة؛ افحص الأبعاد أو أبق القياس. قارن النموذج النقي مستقلا عن المكوّن والجهاز. لا يثبت نجاح Map موضع التمرير أو إعادة الاستخدام الأصلية أو اللمس أو التركيز.

تحقق من نجاح الإصلاح

يحفظ العقد المصحح الحالة خلال الانتقالات المدعومة، ويظهر تغير الاختيار الخارجي، ويطبق سياسة السجل المفقود الموثقة. وتُرفض المعرّفات المكررة قبل العرض.

أبلغ عن فحص الفهرس المستقل كدليل نموذج محلي. وتبقى الأمثلة الأصلية وJSX وسلوك العارض وتمرير القائمة وإتاحة الجهاز غير منفذة في بيئة الدورة.

امنع تكرار المشكلة

  • وثّق الهوية المستقرة واعتماديات الصف الخارجية وعمر المسودة الدائمة معا. واحفظ عينة إعادة ترتيب الصف المحرر، ولا تقس ضبط الأداء إلا بعد إثبات الصحة.

المراجع الرسمية