web-dev-qa-db-ja.com

React useRefは未定義です

ここで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>
  );
}
reactjsreact-hooks
2
James

初めてアクセスしようとしているとき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)
},[])
3
El Aoutar Hamza