这是因为
我试图使用React钩子和Typescript创建一个具有一些基本形状的画布元素，但我遇到了一个错误，useEffect((中的上下文可能为null(ts2531(。
我想这是因为我的canvasRef默认为null，但我有点不确定我还能把它设置为什么，或者是否有更好的方法来实现这一点？
这是我到目前为止的代码(编辑，下面的解决方案(：
import React, { useRef, useEffect } from 'react';
interface CanvasProps {
width: number;
height: number;
}
const Canvas = ({ width, height }: CanvasProps) => {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
if (canvasRef.current) {
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
context.beginPath();
+ context.arc(50, 50, 50, 0, 2 * Math.PI);
+ context.fill();
}
},[]);
return <canvas ref={canvasRef} height={height} width={width} />;
};
Canvas.defaultProps = {
width: window.innerWidth,
height: window.innerHeight
};
export default Canvas;
根据Alex Wayne的快速回答，以下是我更新的useEffect((，它很有效。
useEffect(() => {
if (canvasRef.current) {
const canvas = canvasRef.current;
const context = canvas.getContext('2d');
if (context) {
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI);
context.fill();
}
}
getContext可以返回null。文档：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
如果contextType与可能的图形上下文不匹配，则返回null。
修复
确保不是null，例如
const context = canvas.getContext('2d');
if (context == null) throw new Error('Could not get context');
// now safe
根据文档getContext('2d')可以返回null。
如果contextType与可能的图形上下文不匹配，则返回null。
因此const context的类型可能为null。你可以很确定它不是，但你只需要检查一下。
if (canvasRef.current) {
const context = canvas.getContext('2d');
if (context) {
// use context here.
}
}
有了可选的链接，如果这里有这样的东西，你可以避免嵌套：
const context = canvasRef.current?.getContext('2d')
if (context) {
// use context here.
}