reactjs - Canvas HTML, cu React hooks și Typescript

Încercam să creez un element canvas cu câteva forme de bază, folosind React hooks și Typescript, dar mă lovesc de o eroare unde contextul în useEffect() ar putea fi nul (ts2531).

Presupun că acest lucru se datorează faptului că canvasRef-ul meu este null în mod implicit, dar sunt puțin nesigur la ce altceva îl pot seta sau dacă există o modalitate mai bună de a aborda acest lucru?

Iată codul meu până acum (editare, soluția mai jos):

import React, { useRef, useEffect } from 'react';

interface CanvasProps {
    width: number;
    height: number;
}

const Canvas = ({ width, height }: CanvasProps) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        if (canvasRef.current) {
            const canvas = canvasRef.current;
            const context = canvas.getContext('2d');  
            context.beginPath();
+           context.arc(50, 50, 50, 0, 2 * Math.PI);
+           context.fill(); 
        }       
    },[]);

    return <canvas ref={canvasRef} height={height} width={width} />;
};

Canvas.defaultProps = {
    width: window.innerWidth,
    height: window.innerHeight
};

export default Canvas;

Urmând răspunsul rapid al lui Alex Wayne, iată useEffect() meu actualizat, care funcționează.

    useEffect(() => {
    if (canvasRef.current) {
        const canvas = canvasRef.current;
        const context = canvas.getContext('2d');  
        if (context) {
            context.beginPath();
            context.arc(50, 50, 50, 0, 2 * Math.PI);
            context.fill(); 
        }

    }      

Răspuns #1

Acest lucru se datorează faptului că getContext poate returna null. Documentație: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext

Dacă contextType nu corespunde unui context de desen posibil, se returnează null.

Repara

Asigurați-vă că nu este null, de ex.

        const context = canvas.getContext('2d');  
        if (context == null) throw new Error('Could not get context');
        // now safe

Răspunsul #2

Conform documentației, getContext('2d') poate returna null.

Dacă contextType nu corespunde unui context de desen posibil, se returnează null.

Deci const context are un tip care ar putea fi null. Poți fi destul de sigur că nu este, dar trebuie doar să verifici.

if (canvasRef.current) {
  const context = canvas.getContext('2d');
  if (context) {
    // use context here.
  }
}

Cu lanțuri opționale poți evita imbricarea if-urilor aici cu ceva de genul:

const context = canvasRef.current?.getContext('2d')
if (context) {
  // use context here.
}