您的代码在元素呈现之前运行。

将所有代码放入 useEffect 中，它应该可以解决您的问题。

useEffect(()=>{
    // ... your code (except the return and definitions)
}, []);

数组需要为空（但仍在那里），这样 React 就知道只运行一次。
该函数将在 onMount 中运行一次。（ React 的文档 ）

确保您将 useRef 和其他定义留在 useEffect 之外，以便您可以从代码中访问 ref。

function Landing() {
  const canvasRef = useRef();
  canvasRef.width = window.innerWidth;
  canvasRef.height = window.innerHeight;

  console.log(canvasRef);
  
  useEffect(() => {
    if (canvasRef.current == null) return;

    const context = canvasRef.current.getContext("2d");
    const frameCount = 230;

    const currentFrame = (index) =>
      `../../assets/landing-animations/${(index + 1).toString()}.jpg`;
    const images = [];
    let ball = { frame: 0 };

    for (let i = 0; i < frameCount; i++) {
    const img = new Image();
      img.src = currentFrame(i);
      images.push(img);
    }

    function render() {
      context.clearRect(0, 0, canvasRef.width, canvasRef.height);
      context.drawImage(images[ball.frame]);
    }
  }, []);

  return (
    <div className="landing">
      <h1 className="landing__header">Welcome to my portfolio</h1>
      <canvas className="landing__canvas" ref={canvasRef}></canvas>;
    </div>
  );
}