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

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

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

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
                })
            });
        }
    }
}

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

//打开文件，将数据设置为会话项并重新加载页面
openProject（文件对象）{
var read=new FileReader（）；
read.readAsBinaryString（FileObject）；
read.onloadend=函数（）{
//setItem（“重新加载”、“true”）；
//setItem（“数据”，read.result）；
//document.location.reload（）；
//修复丢失的数据。
var jsonData=JSON.parse（read.result）；
对于（var i=0；i

---

解决此问题的方法是什么？

此

属于最接近的函数上下文，在您的情况下是

read.onloadend=function（）

…而不是类

您可以通过在输入特殊函数之前将类级别

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
                })
            });
        }
    }
}

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

当然，您需要将

onloadend

回调函数中

this

的所有实例更改为

that

（或您选择的任何变量名称）

*编辑：正如@MDTabishMahfuz所描述的，您还可以使用，因为与

函数

声明不同，箭头函数：

// 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
                })
            });
        }
    }
}

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

没有自己对

此

或

超级

---

此

属于最接近的函数上下文，在您的情况下是

read.onloadend=function（）

…而不是类

您可以通过在输入特殊函数之前将类级别

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
                })
            });
        }
    }
}

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

当然，您需要将

onloadend

回调函数中

this

的所有实例更改为

that

（或您选择的任何变量名称）

*编辑：正如@MDTabishMahfuz所描述的，您还可以使用，因为与

函数

声明不同，箭头函数：

// 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
                })
            });
        }
    }
}

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

没有自己对

此

或

超级

---

绑定对于类的函数来说这是必需的，但是您有一个额外的回调（

onloadend函数

），它是一个不同的函数，并且组件的

this

在那里不可用

JS中的常规函数在其上下文中对此有自己的解释。您可以使用@David784建议的方法，也可以对

onloadend

处理程序使用箭头函数，如下所示：

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

---

Arrow函数从父函数的上下文中有此函数，即您案例中的React组件。

绑定这对于类的函数是必需的，但是您有一个额外的回调（

onloadend函数

），它是一个不同的函数，并且组件的

this

在那里不可用

JS中的常规函数在其上下文中对此有自己的解释。您可以使用@David784建议的方法，也可以对

onloadend

处理程序使用箭头函数，如下所示：

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

Arrow函数从父对象的上下文（即案例中的React组件）中具有此属性