تمييز اختلاف Hydration من عيوب المفتاح وهوية الحالة

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

• يحتاج الربط توافق الخادم وأول وصف، وقد تكسره الساعة والعشوائية والمحلية وشروط المتصفح والتداخل المصحح.
• يعتمد حفظ الحالة على النوع والموضع والمفتاح؛ تربط الفهارس أو العشوائية السجل خطأ أو تعيد التركيب. لا تصلح المفاتيح بداية غير حتمية.

1. صنف بداية الاختلاف

للتحميل الأول افحص دخول الربط والإصدارات والرد وDOM قبل التغيير. وللتفاعل حرر صفا ونفذ الإدراج والترتيب والتصفية والاختيار وحدد هل تتبع الحالة السجل أم الشاشة. لا تغير كل مفتاح أو تكبت كل تحذير قبل التمييز، واحفظ المحفز والعمر لا شبه الصورة.

2. طابق المدخلات الأولية

حول العرض غير الحتمي لمدخل أولي مشترك أو حد عميل موثق عند الحاجة. لا تقرأ ساعتي الطرفين وتفترض التطابق. يستخدم المثال تاريخا مصطنعا ويجب أن يسلسله الحقيقي باتساق. تربط hydrateRoot HTML الخادم بدل استبداله. الوحدة ليست SSR كاملة فاختبر دورة معزولة.

export default function App() { const displayDate = "2026-10-25"; return <main><h1>Report</h1><p>Reviewed: {displayDate}</p></main>; }

Report
Reviewed: 2026-10-25

3. اربط التحرير بسجلات مستقرة

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

import { useState } from "react";
export default function App() { const [items, setItems] = useState([{ id: "a", label: "Alpha" }, { id: "b", label: "Beta" }]); return <main><h1>Record identity</h1><button type="button" onClick={() => setItems(xs => xs.some(x => x.id === "c") ? xs : [{ id: "c", label: "Gamma" }, ...xs])}>Prepend Gamma</button><ul>{items.map(item => <li key={item.id}><label>{item.id}<input defaultValue={item.label} /></label></li>)}</ul></main>; }

Editing a then prepending Gamma keeps the edit with a.

4. تحقق من العمرين دون كبت عام

اربط عينة SSR وفعل معالجا وارصد التعافي، واختبر القوائم المحررة مع كل تغيير. افحص المعرف والتركيز. تفيد useId العلاقات لا مفاتيح السجلات. لا تعوض التحليل بالكبت أو العشوائية اللذين يخفيان البداية ويخلقان فقدا لاحقا.

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

• احفظ بيانات حتمية وتداخلا صالحا ومفاتيح مجال وحدود ضبط، وافصل اختبارات الربط والهوية لأن أحدهما لا يثبت الآخر.