为什么我会收到“在嵌套函数中通过 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;

原文由 mr test 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

在你的情况下，这可能是一个合理的问题（我认为），因为你有你的班级 Wall ，它有一个方法 previewImages() 和一个属性 files b9在该函数中，您实例化了一个新函数 readAndPreview() ，在其中指定 this.previewImages 作为对 addEventListener 函数的函数回调。

他们说你可能会错误地使用 this.previewImages ，因为你正在用传统的 JavaScript 语法编写函数， function foo() { ... } ，其中 this 不断被重新定义子函数调用。 In your case, I believe that this is referring to the context of readAndPreview() , and hence cannot access the method this.previewImages() since this doesn不要引用您的父类 Wall 。

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

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

我相信您可以重构您的课程以将 previewImages() { 更改为 previewImages = () => { 并且知道 this 将引用该课程。您必须对 function readAndPreview() { 执行相同的操作。将其更改为 const readAndPreview = () => { 。但是，如果您将它设置为一个变量，我认为您必须将它移动到您调用它的位置之上。如上

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

原文由 Offlein 发布，翻译遵循 CC BY-SA 4.0 许可协议