如何解决 TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).faceDetection is not a function答案

【问题标题】：How to solve TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).faceDetection is not a function如何解决 TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(...)(...).faceDetection is not a function
【发布时间】：2019-09-02 05:01:23
【问题描述】：

我正在尝试使用人脸检测库。我已经在我的 index.html 中将它与脚本标签链接起来，并希望在我的 profile_pic 组件中使用该文件。在 componentDidMount 上，当我调用该函数时，它说 face_detection 不是函数。当我将相同的文件与简单的 javascript 一起使用时，它运行成功。现在如何将它与 react 一起使用？

我正在从 img 标签中获取图像，并且有一个文件输入控件用于动态更改图像的值。

这是我的渲染方法

 render() {

        return (
            <div
                style={{
                    marginTop: "20px",
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center"
                }}
            >
                {/* div for upload photo  starts*/}
                <div>
                    <input
                        accept="image/*"
                        type="file"
                        id="image_upload"
                        style={{ display: "none" }}
                        onChange={e => {
                            this.handle_image_upload(e);
                        }}
                    />
                    <label htmlFor="image_upload">
                        <img
                            id='picture'
                            src={this.state.image}
                            alt="Man or Woman"
                            style={{ width: "150px", height: "150px", cursor: "pointer" }}
                        />
                    </label>
                </div>

            </div>
        );
    }

这是 componentDidMount 生命周期方法

componentDidMount() {

    document.getElementById("image_upload").addEventListener("change",()=>{this.face_detection()})
    }

这是人脸检测函数

 face_detection=()=>{
        console.log($('#picture'))
        $('#picture').faceDetection({
                complete: function (faces) {
                        if (faces.length > 0) {
                                console.log('There is a face in this image')
            }
        }
    });
}

我已经成功地使用了同一个库而没有反应。现在我该如何解决这个错误？

【问题讨论】：

为什么要将它添加为脚本标签而不是捆绑在 webpack 中？您的导入是什么样的？
import 语句只从 jQuery 中导入 $ 并从 react 中做出反应。是否还有其他需要导入的文件？
如果我直接将它导入到我想要使用该函数的组件中，它会给出许多错误，上面写着“预期分配或函数调用，而是看到一个表达式”。它表明这些错误来自库文件

标签： javascript reactjs

【解决方案1】：

似乎没有定义提供“faceDetection()”功能的库。相关库应在“webpack.config.js”或使用'import' 或'require' 的项目的js 文件之一中定义。例如，以下行在您的 React 组件中导入“myLibrary”（位于“libraries”目录中）：

import * as myLibrary from '../libraries/myLibrary';

现在，'faceDetection()' 可以这样使用：

myLibrary.faceDetection(...);

【讨论】：

这个库文件应该放在哪里？目前我在一个名为 face_detection 的文件夹中有这个库，它与 src 文件夹位于同一目录中。我应该把它移到别的地方吗？
不，只是将库的相对地址放在'import'语句中。例如，如果您的 React 组件位于 'src' 的根目录中，那么您的相对地址将是 './face_detection/.js'。
face_detection 是使用 $('#picture') 调用的，我该如何使用导入的对象呢？
我无法导入库，因为库文件位于公用文件夹中。任何导入它们的尝试都会给出“不支持 src/ 之外的相对导入。”。在这种情况下，我应该将文件移到哪里？
您可以尝试将“face_detection”目录移动到“src”目录中吗？（还有其他方法可以在 webpack 配置中包含更复杂的外部 js。请参阅：stackoverflow.com/questions/44151194/…）