类型错误：无法读取未定义的 Scanner.js 属性“扫描”

Question

我正在尝试集成scanner-js到我的反应应用程序中，但收到错误TypeError: Cannot read property 'scan' of undefined。您可以找到以下代码：

Answer 1

import { scanner } from 'scanner-js';

class Home extends React.Component {

  constructor(props) {

    super(props);

    this.state = {};

  }

  scan = () => {

    scanner.scan(this.displayImagesOnPage, {

      output_settings: [

        {

          type: 'return-base64',

          format: 'jpg',

        },

      ],

    });

  };

  displayImagesOnPage(successful, mesg, response) {

    if (!successful) {

      // On error

      console.error('Failed: ' + mesg);

      return;

    }

    if (

      successful &&

      mesg != null &&

      mesg.toLowerCase().indexOf('user cancel') >= 0

    ) {

      // User cancelled.

      console.info('User cancelled');

      return;

    }

    var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage

    for (

      var i = 0;

      scannedImages instanceof Array && i < scannedImages.length;

      i++

    ) {

      var scannedImage = scannedImages[i];

      var elementImg = scanner.createDomElementFromModel({

        name: 'img',

        attributes: {

          class: 'scanned',

          src: scannedImage.src,

        },

      });

    }

  }

  render() {

    return (

      <div>

        <button type="button" onClick={this.scan}>

          Scan

        </button>

      </div>

    );

  }

}

export default Home;

当我将鼠标悬停在该scanner对象上时，会显示以下内容，但我不知道为什么它会抛出未定义的错误。

有人可以帮我找到问题吗？

Answer 2

这是因为你导入错了。如果您在 npm 上检查包，您可以看到没有导出的模块，因此您无法导入单个导出（import {scanner} from 'scanner-js'），也无法导入默认导出（import scanner from 'scanner-js）。

您只需导入整个模块即可产生副作用，并且它将scanner向window对象添加一个全局变量。

import 'scanner-js';

console.log(typeof scanner);

// => object

console.log(typeof scanner.scan);

// => function

如果您使用 ESLint，则需要添加scanner为全局变量。

CodeSandbox链接：https://codesandbox.io/s/scanner-js-hcz2j