تشخيص استدعاءات Hook غير الصالحة وتغير عددها

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

• تحتاج useState وuseEffect ترتيبا علويا ثابتًا في المكون أو Hook مخصصة، وتخرقه الشروط والحلقات والمعالجات والخروج المتغير.
• قد يأتي الخطأ من عدم توافق العارض أو نسخ React متعددة، وهي أسباب تختلف من موضع المصدر.

1. حدد مواضع Hooks العادية

افحص المكون وHooks التي يستدعيها وقارن المسارات والخروج. ليست الدالة العادية مالكا صالحا لمجرد استدعائها منه، فاستخرج مكونا أو Hook. لا تستدع App() لتجاوز JSX. لـuse استثناءات مدعومة لا تنطبق على useState وuseEffect؛ حدد الواجهة الفعلية.

2. احفظ ترتيب الاستدعاء بكل عرض

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

import { useState } from "react";
function Detail({ visible }) { const [count, setCount] = useState(0); if (!visible) return <p>Details hidden</p>; return <button type="button" onClick={() => setCount(c => c + 1)}>Detail count {count}</button>; }
export default function App() { const [visible, setVisible] = useState(false); return <main><h1>Stable Hook order</h1><button type="button" onClick={() => setVisible(x => !x)}>Toggle</button><Detail visible={visible} /></main>; }

Toggle reveals Detail count 0 without a Hook-order error.

3. افحص هوية الوحدات المثبتة والمحلولة

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

4. تحقق من إصلاح المصدر والحزم منفصلين

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

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

• احفظ مواضع Hooks وراجع الخروج واستخدم سياسة peer للمكتبات، واحفظ القفل ودليل حل الوحدات.