Question

我正在为我遇到的另一个问题制定解决方法，但是我收到了“this.setState 不是函数”错误。我发现 this 答案建议将它绑定在构造函数中，我做到了。

这是我的构造函数的一部分：

this.newProject = this.newProject.bind(this);
this.openProject = this.openProject.bind(this);
this.saveProject = this.saveProject.bind(this);

这是我的功能：

// Open a file, set data as session item and reload page
openProject(FileObject) {
    var read = new FileReader();
    read.readAsBinaryString(FileObject);
    read.onloadend = function() {
        //sessionStorage.setItem("reloading", "true");
        //sessionStorage.setItem("data", read.result);
        //document.location.reload();

        // Fix for missing data.
        var jsonData = JSON.parse(read.result);
        for (var i = 0; i < jsonData.blocks.length; i++) {
            var name = jsonData.blocks[i].name;
            var id = jsonData.blocks[i].id;
            var ip = jsonData.blocks[i].ip;
            var port = jsonData.blocks[i].port;
            this.setState( { blockCount: (i + 1), });

            // Add block to the list
            this.setState({
                blocks: this.state.blocks.concat({
                    id: id,
                    name: name,
                    ref: React.createRef(),
                    positionX: window.innerWidth*0.4  - 125 / 2,
                    positionY: 75 + ( 50 * this.state.blocks.length),
                    links:[],
                    requires: this.state.parameters.blockRequires
                })
            });
        }
    }
}

有什么办法可以解决这个问题？

Answer 1

this 属于最接近的函数上下文，在您的情况下是 read.onloadend = function()...NOT 类。

您可以通过在输入特定函数之前将类级别 this 分配给新变量来解决此问题：

openProject(FileObject) {
    var read = new FileReader();
    read.readAsBinaryString(FileObject);
    var that = this;
    read.onloadend = function() {
        // ...
        that.setState(/*... etc*/

当然，您需要将 this 回调函数中的 onloadend 的所有实例更改为 that（或您选择的任何变量名称） .

*编辑：正如@MDTabishMahfuz 所描述的，您也可以使用 arrow function，因为与 function 声明不同，箭头函数：

<块引用>

没有自己的 this 或 super 绑定

Answer 2

绑定 this 对于类的函数是必要的，但您有一个额外的回调 (onloadend function)，这是一个不同的函数，并且组件的 this 在那里不可用。

JS 中的常规函数在它们的上下文中对此有自己的看法。您可以使用 @David784 建议的方法，也可以使用 onloadend 处理程序的箭头函数，如下所示：

read.onloadend = () => {
    ....
    this.setState(....);
    ....
}

箭头函数具有来自父级上下文的 this，在您的情况下是 React 组件。

反应：this.setState 不是一个函数

2 个答案: