为什么我会收到“通过嵌套函数中的 this 对类字段的潜在无效引用访问”错误

Question

在 vanilla JS 中，我的代码可以正常工作。对于这种情况，我想组件化我的Wall类，该类应该在用户上传的浏览器中显示图像。同样，这在 vanilla JS 中正常工作，但在 JSX 中不正常。

我正在potentially invalid reference access to a class field via this in a nested function上document.querySelector("#file-input").addEventListener("change", this.previewImages);线，我认为这是导致问题的原因。

我做错了什么，我该如何解决？

import React, {Component} from 'react';

class Wall extends Component {
    constructor(props) {
        super(props);
        this.previewImages = this.previewImages.bind(this);
    }

    previewImages() {
        let preview = document.createElement("div");

        if (this.files) {
            [].forEach().call(this.files, readAndPreview());
        }

        function readAndPreview() {
            if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
                return alert(file.name + " is not an image");
            }

            let reader = new FileReader();

            reader.addEventListener("load", () => {
                let image = new Image();
                image.height = 100;
                image.title = file.name;
                image.src = this.result;

                let date = Date.now();
                let d = new Date(parseInt(date, 10));
                let ds = d.toString("MM/dd/yy HH:mm:ss");
                console.log(ds);

                let initialCountOfLikes = 0;
                let zeroLikes = document.createElement("h1");
                let zeroLikesTextNode = zeroLikes.createTextNode(initialCountOfLikes + " likes");

                zeroLikes.appendChild(zeroLikesTextNode);

                preview.appendChild(image); // makes image appear
                preview.appendChild(zeroLikes); // makes like count appear

                image.ondblclick = function() {
                    if (initialCountOfLikes === 0) {
                        console.log("Inside if block");
                        initialCountOfLikes++;
                        console.log("initialCountOfLikes++ => " + initialCountOfLikes);
                    } else if (initialCountOfLikes === 1) {
                        console.log("inside second else if block");
                        initialCountOfLikes--;
                        console.log("initialCountOfLikes-- => " + initialCountOfLikes);
                    }
                    zeroLikesTextNode.nodeValue = initialCountOfLikes + " likes";
                };
            });
            reader.readAsDataURL(file);
            document.querySelector("#file-input").addEventListener("change", this.previewImages);
        }
    }

    render() {
        return (
            <div id="file-input-wrapper">
                <input type="file" />
                <label htmlFor="file-input" id={"LblBrowse"} />
            </div>
        );
    }
}

export default Wall;

Answer 1

该警告告诉您，this在 JavaScript中使用经常会产生令人困惑的含义，特别是在嵌套在另一个函数中的函数中使用时。this停止引用类，而是引用嵌套函数的范围。

在你的情况下，这可能是一个合理的问题（我认为），因为你有你的类，Wall，它有一个 methodpreviewImages()和一个 property files。在该函数中，您已经实例化了一个新函数readAndPreview()，在其中指定this.previewImages为该函数的函数回调addEventListener。

他们说您可能使用this.previewImages不正确，因为您使用传统 JavaScript 语法编写函数，在每个子函数调用function foo() { ... }中this不断重新定义。在您的情况下，我认为这this是指 的上下文readAndPreview()，因此无法访问该方法，this.previewImages()因为this不指代您的父类Wall.

人们过去常常做这样的事情，var that = this;在父类上创建一个，你会知道这that总是意味着父类。

但是现在，通过使用“粗箭头”语法的 ES6 lambda 函数，() => { }您可以访问this并知道它指的是父作用域。

我相信您可以重构您的类以更改previewImages() {为previewImages = () => {并知道this将引用该类。您必须对function readAndPreview() {. 将其更改为const readAndPreview = () => {. 但是，如果您将其设置为变量，我认为您必须将其移动到您调用它的位置上方。例如上面

if (this.files) {
    [].forEach().call(this.files, readAndPreview());
}

Answer 2

我在 Angular 8 中遇到了这个错误。我使用箭头函数而不是常规函数来解决。

在你的情况下。

        readAndPreview = () => { ... }

这可能会解决您的问题。