تایپاسکریپت: React Native استفاده از useRef باعث خطای «ممکن است شیء null باشد» میشود

من از یک ref روی یک View استفاده میکنم. تایپاسکریپت به من خطا میدهد: "Object is possibly 'null'". نوع درست برای یک ref که روی یک View استفاده میشود چیست؟ به طور مشخص من از یک Animated.View استفاده میکنم، اما فکر نمیکنم این تفاوتی ایجاد کند.

سایر پاسخها در اینجا برای ReactJS (وب) هستند و از const overlayEl=useRef<HTMLDivElement>(null); استفاده میکنند، اما من دنبال پاسخی برای React Native هستم.

const Component = () => {
  const ref = React.useRef(null);

  React.useLayoutEffect(()=>{
    console.log(ref.current.clientHeight); 
    // ^ Error: "Object is possibly null" on the `ref.current` portion
  },[]);

  return (
    <Animated.View ref={ref} style={{height: 100}}></Animated.View>
  );
}

چیزهایی که امتحان کردم:

const ref = React.useRef<React.FunctionComponent>(null);
const ref = React.useRef<React.ReactElement>(null);
const ref = React.useRef<React.MutableRefObject<null>>(null);
const ref = React.useRef(null) as React.MutableRefObject<null>;
console.log(ref?.current?.clientHeight); 
// ^ Error: Property clientHeight does not exist on type 'never'

تنها چیزی که کار میکند این است، اما این واقعاً یک راهحل مناسب نیست

  React.useLayoutEffect(()=>{
    const current = ref?.current || { clientHeight: 0 }; 
    console.log(ref.current.clientHeight);
  },[]);

پاسخ شماره ۱

در اینجا نحوه تایپ شدن useRef در React آمده است:

function useRef<T>(initialValue: T): MutableRefObject<T>;

interface MutableRefObject<T> {
    current: T;
}

این به این معناست که وقتی MutableRefObject تایپ میشود، همیشه نوع خود را حفظ میکند، بنابراین شما باید آن را بهدرستی با علامتهای زاویهای تایپ کنید:

const ref = React.useRef<React.ElementRef<typeof View> | null>(null);

پاسخ شماره ۲

من فکر نمیکنم این واقعاً یک مشکل TypeScript باشد، بلکه بیشتر یک مشکل مقداردهی اولیه است. وقتی سعی میکنید به ref خود دسترسی پیدا کنید، این کار را به روشی انجام میدهید که برای دسترسی به یک شیء استفاده میکنید و آن null است و یک شیء نیست و بنابراین خطایی که دریافت میکنید رخ میدهد. شما میتوانید یا بررسی کنید که ref null نیست، یا آن را با یک شیء مقداردهی اولیه کنید تا بتوانید بهطور صحیح ویژگیهای آن را پرس و جو کنید:

// this
const ref = React.useRef({});



// or this
const ref = React.useRef(null);
React.useLayoutEffect(()=>{
    if(ref.current !== null){
       //do stuff
    }
  },[]);