Реакция useRef не определена

Question

Я думаю, что я могу неправильно использовать useRef здесь. Когда я пытаюсь нарисовать на холсте, я получаю следующую ошибку: cannot set 'fillStyle' of undefined.

import React,{useEffect, useRef} from "react"
import useWindowSize from "../hooks/useWindowSize"

    export default function Player(){
        const canvasRef = useRef()
        const ctx = useRef()

        useEffect(()=>{
            ctx.current = canvasRef.current.getContext('2d')
        },[])
        ctx.current.fillStyle= "green"
        ctx.current.fillRect(20,20,150,100)
        return(
            <React.Fragment>
        <div>Hello</div>
        <canvas ref={canvasRef} width="500" height="500" />
        </React.Fragment>
    )}

Answer 1

В первый раз, когда вы пытаетесь получить доступ к ctx.current, оно все еще не определено, потому что назначение внутри этого эффекта все еще не произошло:

useEffect(()=>{
    ctx.current = canvasRef.current.getContext('2d')
},[])

Это потому, что эффект запускается после фаза рендеринга.

Вы должны сделать это внутри useEffect вместо:

useEffect(()=>{
    ctx.current = canvasRef.current.getContext('2d')
    ctx.current.fillStyle= "green"
    ctx.current.fillRect(20,20,150,100)
},[])