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