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)
},[])

React useRef未定义

1 个答案: