react-qr-reader@2.2.1使用时出现videoWidth为null报错如何解决

这个错误来自react-qr-reader内部的轮询逻辑缺陷：组件挂载后会启动定时轮询任务，逐帧读取video元素的画面识别二维码。当通过条件渲染直接卸载组件时，轮询任务没有被同步清理，任务执行时对应的video DOM已经被移除，元素引用为null，读取videoWidth属性时就会抛出类型错误。
另外你贴的代码里有个不影响逻辑的笔误：style属性里的heigth拼写错误，正确属性名是height。

两种方案都可以解决问题，按需选择即可：

• 方案一：手动控制清理时序，避免直接卸载
  不要在扫描到结果的回调里直接修改状态卸载组件，先通过ref调用组件实例的停止方法关掉摄像头和轮询，等一个事件循环再更新卸载状态，给内部清理逻辑留够执行时间。
  修复后的完整代码示例：

  import { useState, useRef } from 'react';
  import QrReader from 'react-qr-reader';
  
  export default function QrScanner() {
    const [isRecording, setIsRecording] = useState(true);
    const scannerRef = useRef(null);
  
    const handleScan = (scanResult) => {
      if (!scanResult) return;
      // 先停掉摄像头和内部识别轮询
      scannerRef.current?.stopCamera();
      // 延后一个事件循环再卸载组件，避免轮询任务残留
      setTimeout(() => {
        setIsRecording(false);
        // 此处写扫描成功后的业务逻辑，比如跳转、弹提示
      }, 0);
    };
  
    const handleError = (err) => {
      console.error('二维码扫描异常:', err);
    };
  
    return (
      <div>
        {isRecording && (
          <QrReader
            ref={scannerRef}
            delay={500}
            onError={handleError}
            onScan={handleScan}
            style={{ width: "400px", height: "400px" }}
          />
        )}
      </div>
    );
  }
  

• 方案二：错误边界兜底
  这个报错本身不影响业务逻辑正常运行，只是控制台会打印错误，如果不想改现有逻辑，可以给QrReader套一层最基础的错误边界，捕获这个渲染层错误即可，不会影响其他组件运行。

注意：如果使用的是react-qr-reader 3.0以上版本，也可以直接给组件加constraints参数指定视频流配置，能减少这类轮询残留问题出现的概率。

内容的提问来源于stack exchange，提问作者Mohanraj G