React: Hydration failed

همه خطاها رایگان
JavaScript

React: Hydration failed

HTML رندرشده در سرور توسط React با آنچه کلاینت در حین هیدراسیون رندر کرد مطابقت نداشت.

معنی آن

HTML رندرشده در سرور توسط React با آنچه کلاینت در حین هیدراسیون رندر کرد مطابقت نداشت.

علت احتمالی

خروجی غیرقطعی مانند Date.now()/Math.random()، مقادیر مخصوص مرورگر (window، localStorage) استفاده‌شده در حین رندر، یا HTML تودرتوی نامعتبر.

راه رفع آن

اطمینان حاصل کنید سرور و کلاینت نشانه‌گذاری یکسانی رندر می‌کنند: منطق مخصوص مرورگر یا وابسته به زمان را به useEffect منتقل کنید، یا آن را با یک پرچم mounted به تعویق بیندازید تا فقط پس از هیدراسیون اجرا شود.

سایر خطاهای JavaScript

TypeError: Cannot read properties of undefined کد سعی کرد یک ویژگی از undefined (یا null) را بخواند. TypeError: Cannot read properties of null کد سعی کرد یک ویژگی را بخواند یا متدی را روی مقداری که null است فراخوانی کند. ReferenceError: x is not defined یک نام متغیر یا تابع استفاده شده اما هرگز در دامنه اعلام نشده است. TypeError: x is not a function کد سعی کرد چیزی را به‌عنوان تابع فراخوانی کند که تابع نیست. SyntaxError: Unexpected token تجزیه‌گر JavaScript به کاراکتری برخورد که انتظارش را نداشت. SyntaxError: Unexpected end of JSON input JSON.parse() یک رشته خالی یا ناقص دریافت کرد و نتوانست تجزیه را تمام کند. RangeError: Maximum call stack size exceeded محدودیت پشته فراخوانی از حد گذشت. Uncaught (in promise) یک promise رد شد و هیچ‌چیز خطا را نگرفت. Blocked by CORS policy: No 'Access-Control-Allow-Origin' مرورگر یک درخواست بین‌مبدأ را که سرور اجازه نداده بود مسدود کرد. TypeError: Failed to fetch fetch() نتوانست درخواست شبکه را کامل کند. TypeError: Assignment to constant variable کد سعی کرد متغیری را که با const اعلان شده دوباره مقداردهی کند. TypeError: Cannot convert undefined or null to object یک عملیات که انتظار شیء دارد (مانند Object.keys یا Object.assign) مقدار null یا undefined دریافت کرد. SyntaxError: Cannot use import statement outside a module یک دستور import ES در فایلی استفاده شد که به‌عنوان ماژول ES در نظر گرفته نمی‌شود. TypeError: x.map is not a function کد .map() را روی مقداری فراخوانی کرد که آرایه نیست.

درباره جستجوی کد خطا

جستجوگر کدهای خطا یک فهرست قابل جستجو از بیش از ۲۰۰ پیام و کد خطای رایج در ۱۲ دسته است: کدهای وضعیت HTTP، کدهای خطای Windows، خطاهای مرورگر و شبکه، JavaScript، Python، PHP، Node.js و npm، Java، MySQL، Git، خطاهای شل Linux و کدهای ایمیل/SMTP. هر مورد به زبانی ساده نوشته شده تا عیب‌یابی سریع باشد.

هر خطا در سه بخش توضیح داده می‌شود: معنای واقعی پیام، علت رایج آن و مراحل مشخص برای رفع آن. این ساختار یک رشتهٔ مبهم مانند ERR_CONNECTION_REFUSED یا 0x80070005 را به یک چک‌لیست عملی تبدیل می‌کند، نه یک حدس و گمان.

می‌توانید فهرست را بر اساس دسته فیلتر کنید، بر اساس کد، ثابت یا بخشی از پیام جستجو کنید، و هر کد را با یک کلیک کپی کنید. هر خطا صفحهٔ اختصاصی خودش را با خطاهای مرتبط از همان دسته دارد، بنابراین می‌توانید لینک مستقیم به راه‌حل دقیق را نشانک‌گذاری یا به اشتراک بگذارید.

نحوه استفاده از جستجوی کد خطا

  1. کد یا پیام خطا را در کادر جستجو تایپ کنید — برای مثال 404، ERR_NAME_NOT_RESOLVED یا 0x80070005.
  2. اگر جستجو نتایج زیادی برگرداند، با فیلتر دسته (HTTP، Windows، JavaScript، MySQL و غیره) نتایج را محدود کنید.
  3. مورد منطبق را باز کنید تا معنای آن، علت احتمالی و روش رفع آن را بخوانید.
  4. از دکمهٔ کپی برای گرفتن کد دقیق جهت گزارش باگ یا تیکت پشتیبانی استفاده کنید.
  5. بخش خطاهای مرتبط را برای دیدن سایر خطاهای همان دسته بررسی کنید.

سوالات متداول

این ابزار ۱۲ دسته را پوشش می‌دهد: کدهای وضعیت HTTP، خطاهای سیستمی Windows، خطاهای مرورگر و شبکه، JavaScript، Python، PHP، Node.js و npm، Java، MySQL، Git، خطاهای شل Linux و کدهای پاسخ ایمیل/SMTP — در مجموع بیش از ۲۰۰ مورد.

با کلمات کمتری جستجو کنید. کوتاه‌ترین بخش منحصربه‌فرد بهترین نتیجه را می‌دهد: فقط کد عددی («404»، «0x80070005») یا نام ثابت («ERR_NAME_NOT_RESOLVED») به‌جای جملهٔ کاملی که سیستم شما نمایش داده است.

بله. هر مورد یک صفحهٔ جزئیات اختصاصی دارد که معنا، علت احتمالی و راه‌حل را توضیح می‌دهد، به‌همراه خطاهای مرتبط از همان دسته. می‌توانید آن را نشانک‌گذاری کنید یا لینک را مستقیماً برای همکار یا تیکت پشتیبانی ارسال کنید.

راه‌حل‌ها روش استاندارد و مورد پذیرش عمومی برای هر خطا را توصیف می‌کنند. با این حال، ابتدا بخش علت احتمالی را بخوانید — یک کد می‌تواند چند علت داشته باشد و تطبیق علت با وضعیت شما مشخص می‌کند کدام راه‌حل کاربرد دارد.

بله، کاملاً رایگان است. می‌توانید بدون نیاز به حساب کاربری جستجو کنید، فهرست دسته‌ها را مرور کنید و هر تعداد صفحهٔ جزئیات خطا که نیاز دارید باز کنید.
اشتراک‌گذاری
ابزارهای مرتبط
فرمت‌کننده کد HTML، CSS و JavaScript را زیباسازی کنید — indent را دوباره تنظیم کنید و شکست خط اضافه کنید تا کد نامرتب یا فشرده خوانا شود. رایگان
فشرده‌کننده کد HTML، CSS و JavaScript را کوچک کنید — comment‌ها و فضای سفید را حذف کنید تا فایل‌ها کوچک‌تر و سریع‌تر بارگذاری شوند. رایگان
قالب‌بند آرایه آرایه‌ها و اشیای درون‌خطی را به خطوط تمیز و تورفته گسترش دهید، یا آن‌ها را دوباره به‌صورت درون‌خطی جمع کنید — برای PHP، JavaScript، TypeScript، JSON، Python، Ruby و موارد دیگر. رایگان
تستر Regex عبارات منظم را مستقیماً در مرورگر خود بسازید، تست و اشکال‌زدایی کنید — برجسته‌سازی فوری مطابقت‌ها، گروه‌های capture، پیش‌نمایش جایگزینی، توضیح به زبان ساده و کد آماده برای چسباندن برای بیش از ۱۵ زبان. رایگان
سازنده عبارت Cron یک عبارت cron از یک فرم بصری و ساده بسازید — هر فیلد را تنظیم کنید، عبارت زنده، برنامه قابل خواندن برای انسان و زمان‌های اجرای بعدی را ببینید، سپس هر عبارتی را به فرم parse کنید. رایگان
رمزگشای JWT هدر و payload یک JWT را رمزگشایی کنید (امضا تأیید نمی‌شود). رایگان
جستجوهای پرطرفدار
جستجوی کد خطا پایگاه داده پیام خطا این خطا یعنی چه کدهای خطای ویندوز کدهای خطای کروم لیست کدهای خطای http رفع پیام خطا معنی کد خطا
به کمک نیاز دارید؟
با این ابزار مشکلی پیدا کردید؟ به تیم ما اطلاع دهید.
گزارش مشکل

این ابزار رایگان را به وب‌سایت خود اضافه کنید — کد زیر را کپی و جای‌گذاری کنید.