useRef.current 存在，但是是 null 取决于 scope

Question

我正在尝试使用 React 和 Fabric.js 在 canvas 上绘制图像。
演示（代码沙盒）

在上面的演示中，当按下“绘制图像”按钮时，人们会期望立即在 canvas 上绘制图像，但在 canvas 上没有绘制任何图像。

画不出来的原因好像是执行function在canvas上画图时，useRef的current是useRef （如果去掉第50行的isInput条件， containerRef.current就不再是null了，图片可在canvas上绘制。）

你能帮我在canvas上画个图吗？

---

代码如下。

const App = () => {
  const [img, setImg] = useState(defaultImg);
  const changeImg = ({ target: { value } }: { target: { value: string } }) =>
    setImg(value);

  const [isInput, setIsInput] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);

  const checkCurrent = (caller: string) => {
    console.log(`[${caller}]Container: ${containerRef.current}`);
  };
  useEffect(() => {
    if (!isInput) return;

    checkCurrent("useEffect");
  }, [isInput]);

  const drawImg = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    if (!img) return;
    setIsInput(true);

    checkCurrent("drawImg");

    canvas = new fabric.Canvas("canvas");
    fabric.Image.fromURL(img, (imgObj: fabric.Image) => {
      canvas.add(imgObj).renderAll();
    });
  };

  return (
    <div className="App">
      {!isInput && (
        <form onSubmit={drawImg}>
          Demo image url
          <input type="text" onChange={changeImg} defaultValue={img} />
          <button type="submit">Draw image</button>
        </form>
      )}

      {isInput && (
        <>
          <button onClick={() => setIsInput(false)}>Reset</button>
          <div ref={containerRef} className="canvas_container">
            <canvas ref={canvasRef} id="canvas" />
          </div>
        </>
      )}
    </div>
  );
};

export default App;

我知道如果没有 DOM， containerRef.current是 null。

然而，

1. 设置containerRef的 div 由setIsInput(true)绘制
2. useEffect里面得到的containerRef.current不是null。

从以上几点可以看出，即使在drawImg function内部， containerRef.current也不是null。

Answer 1

调用setIsInput(true)只是请求重新渲染组件。 这将很快发生，但通常不会立即同步发生。 因此，您在setIsInput(true)之后的行中的代码不能假定 ref 已经更新。

所以通常，您会分两步执行此操作。 首先，重新渲染组件，然后将图像绘制到 canvas。这可以通过将绘图代码放入 useEffect 来完成，因为正如您所注意到的，这发生在填充 ref 之后（因为它发生在渲染完成之后）刷新到 dom):

const drawImg = (e: { preventDefault: () => void }) => {
  e.preventDefault();
  if (!img) return;
  setIsInput(true);
}

useEffect(() => {
  if (!isInput) return;

  const canvas = new fabric.Canvas("canvas");
  fabric.Image.fromURL(img, (imgObj: fabric.Image) => {
    canvas.add(imgObj).renderAll();
  });
}, [isInput]);

由于您使用的是 React 18，所以还有一个额外的选项需要提及，但我建议您不要使用它，除非您确实需要它。 React 18 添加了一个名为flushSync的新 function，它可以强制同步呈现 state 更新。

import { flushSync } from 'react-dom'; // Note: 'react-dom', not 'react'

// ...

const drawImg = (e: { preventDefault: () => void }) => {
  e.preventDefault();
  if (!img) return;

  flushSync(() => {
    setIsInput(true);
  });

  canvas = new fabric.Canvas("canvas");
  fabric.Image.fromURL(img, (imgObj: fabric.Image) => {
    canvas.add(imgObj).renderAll();
  });
};

请务必查看文档中有关 flush sync的注释，因为如果您选择使用它会产生后果。