反应 useRef 未定义答案

【问题标题】：React useRef is undefined反应 useRef 未定义
【发布时间】：2019-10-21 22:04:02
【问题描述】：

我想我可能在这里误用了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>
  );
}

【问题讨论】：

什么是 ctx？您使用 useRef 但从未将该 ref 分配给任何东西？
您好，感谢您的评论，我想我在 useEffect 函数中将 cnvRef.current.getContext('2d') 分配给 ctx.current

标签： reactjs react-hooks

【解决方案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)
},[])

【讨论】：

@James，我更新了我的答案以更好地解释发生了什么，我猜你犯的错误是认为effect 在渲染阶段之前运行。