از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
React، همراه با TypeScript، ترکیبی قدرتمند برای ساخت برنامه های کاربردی وب قوی است. با این حال، گاهی اوقات با خطاهای TypeScript مواجه می شویم که می تواند گیج کننده باشد، مانند خطای “UseRef Object احتمالاً تهی است”.
در این بایت، این خطا را توضیح می دهیم و چند راه حل برای مدیریت آن در برنامه React شما نشان می دهیم.
چرا این خطا را دریافت می کنید؟
خطای “useRef Object isssibly null” معمولا زمانی اتفاق می افتد که TypeScript نمی تواند تضمین کند که یک متغیر یا شیء وجود نخواهد داشت. null یا undefined در زمان اجرا این در هنگام استفاده از useRef hook در React
import React, { useRef } from 'react';
function MyComponent() {
const myRef = useRef(null);
return <div ref={myRef}>Hello World</div>;
}
در کد بالا، myRef با مقداردهی اولیه می شود null. TypeScript که یک زبان تایپ ایستا است، یک خطا ایجاد می کند زیرا نمی تواند آن را تضمین کند myRef.current نخواهد بود null زمانی که بعداً قابل دسترسی است.
رفع خطا با Type Guard
یک راه متداول برای رفع این خطا استفاده از “Type Guard” است. Type Guard راهی است که به TypeScript می گوید که یک متغیر یا شی خاص یک نوع خاص است.
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const myRef = useRef(null);
useEffect(() => {
if (myRef.current !== null) {
// Now TypeScript knows that myRef.current is not null
console.log(myRef.current);
}
}, ());
return <div ref={myRef}>Hello World</div>;
}
در کد به روز شده بالا، ما از یک استفاده می کنیم if بیانیه به عنوان محافظ نوع برای بررسی اینکه آیا myRef.current نیست null قبل از ثبت آن به این ترتیب، TypeScript می تواند آن را تضمین کند myRef.current نخواهد بود null زمانی که در نهایت به آن دسترسی پیدا کرد.
با استفاده از اپراتور اختیاری زنجیره ای
راه دیگر برای حل خطای “UseRef Object is Possibly Null” استفاده از عملگر Optional Chaining است.?.). این عملگر به شما امکان می دهد به ویژگی های عمیق تو در تو یک شی دسترسی داشته باشید بدون نیاز به بررسی وجود هر ویژگی در زنجیره.
import React, { useRef, useEffect } from 'react';
function MyComponent() {
const myRef = useRef(null);
useEffect(() => {
// Using optional chaining operator
console.log(myRef.current?.innerText);
}, ());
return <div ref={myRef}>Hello World</div>;
}
در کد بالا، ما از عملگر Optional Chaining برای دسترسی استفاده می کنیم innerText از myRef.current. اگر myRef.current صفر است، سپس عبارت “اتصال کوتاه” و undefined بازگردانده خواهد شد، که از هرگونه خطای زمان اجرا جلوگیری می کند.
اپراتور ادعای غیر تهی
در TypeScript، می توانید از غیرnull عملگر ادعا برای حل خطا. عملگر غیر تهی یک عملگر عبارت پسوندی است که با علامت تعجب (!) نشان داده می شود. این عملگر زمانی استفاده می شود که مطمئن باشید عبارت قبل از عملگر نیست null یا undefined.
بیایید یک مثال را ببینیم:
const ref = useRef<HTMLDivElement>(null);
//... some code
ref.current!.focus();
در کد بالا، ما از غیرnull عملگر ادعا (!) بعد از ref.current. این به TypeScript می گوید که ref.current هرگز نخواهد بود null یا undefined وقتی که focus() روش نامیده می شود. این راهی است که به TypeScript می گوییم به ما اعتماد کند که ما آن را مدیریت کرده ایم null یا undefined مورد خودمان
توجه داشته باشید: در حالی که غیرnull اپراتور ادعا می تواند یک راه حل سریع باشد، استفاده بیش از حد از آن توصیه نمی شود. استفاده بیش از حد از غیرnull عملگر ادعا می تواند منجر به خطاهای زمان اجرا شود زیرا کامپایلر TypeScript را دور می زند null و undefined چک ها
نتیجه
در این بایت، روش حل خطای “useRef Object is possibly null” را در React دیدیم. برای انجام این کار از Type Guard، Operator Chaining Optional یا Non-Null Assertion Operator استفاده کردیم. به یاد داشته باشید، در حالی که این راه حل ها می توانند به شما کمک کنند تا کامپایلر TypeScript را دور بزنید null و undefined بررسی کنید، همچنین مهم است که این موارد را به درستی در کد خود مدیریت کنید تا از سایر خطاهای زمان اجرا جلوگیری کنید.
منتشر شده در 1403-01-02 12:48:08
