HTML Canvas "getContext" React 中的 null 错误

Question

我经常收到这个 Unhandled Rejection (TypeError): Cannot read property 'getContext' of null 在 react.js 中与 HTML canvas 一起工作。错误在第 27 行，我正在从 .html 文件转换代码，我更改了 document.getelementbyid("canvas") to canvasRef = useRef(null)，然后将其传递给函数。

代码如下：

import React, {useRef} from "react";
import * as tmPose from '@teachablemachine/pose';

const URL = 'https://my_url';
let model, webcam, ctx, maxPredictions;

export default function App() {
    const canvasRef = useRef(null);
    
    const runPosenet = async (canvas) => {
        const modelURL = URL + 'model.json';
        const metadataURL = URL + 'metadata.json'

        model = await tmPose.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();

        ctx = canvas.current.getContext('2d');
        canvas.current.width = 640;
        canvas.current.height = 480;
        
    }
}

    runPosenet(canvasRef);


    return (
    <div className="App">
      <header className="App-header">
      <canvas ref = {canvasRef}/>
      </header>
      </div>
    );

}

我该如何解决这个错误？

Answer 1

错误是因为 runPosenet(canvasRef); 在 render 之前运行，而 canvas 不在 DOM 上。

把它放在 React.useEffect.

 useEffect(() => {
    runPosenet(canvasRef);
  }, []); // <= Runs once on component load

HTML Canvas "getContext" React 中的 null 错误

HTML Canvas "getContext" of null error in React

reactjs

react-hooks

html5-canvas

tensorflow.js