反应：this.setState 不是一个函数 [重复]答案

【问题标题】：React: this.setState is not a function [duplicate]反应：this.setState 不是一个函数 [重复]
【发布时间】：2021-05-11 12:17:58
【问题描述】：

我正在努力解决我遇到的另一个问题，但是我收到了“this.setState is not a function”错误。我找到了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
                })
            });
        }
    }
}

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

您可以通过在输入该 ad-hoc 函数之前将类级别 this 分配给一个新变量来解决此问题：

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

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

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

没有自己绑定到this 或super

【讨论】：

【解决方案2】：

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

JS 中的常规函数在其上下文中对此进行了说明。您可以使用@David784 建议的方法，也可以对onloadend 处理程序使用箭头函数，如下所示：

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

箭头函数从父上下文中获得 this，在你的例子中就是 React 组件。

【讨论】：