Javascript 反应 - 未捕获的类型错误：无法读取未定义的属性“setState”

React - uncaught TypeError: Cannot read property 'setState' of undefined

提问by Dangling_pointer

I am getting the following error

我收到以下错误

Uncaught TypeError: Cannot read property 'setState' of undefined

未捕获的类型错误：无法读取未定义的属性“setState”

even after binding delta in the constructor.

即使在构造函数中绑定 delta 之后。

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

        this.delta.bind(this);
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

回答by Davin Tryon

This is due to this.deltanot being bound to this.

这是由于this.delta没有绑定到this.

In order to bind set this.delta = this.delta.bind(this)in the constructor:

为了this.delta = this.delta.bind(this)在构造函数中绑定 set ：

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}

Currently, you are calling bind. But bind returns a bound function. You need to set the function to its bound value.

目前，您正在调用绑定。但是 bind 返回一个绑定函数。您需要将函数设置为其绑定值。

回答by Fabien Sa

In ES7+(ES2016) you can use the experimental function bind syntaxoperator ::to bind. It is a syntactic sugar and will do the same as Davin Tryon's answer.

在ES7+(ES2016) 中，您可以使用实验性函数 bind 语法运算符::进行绑定。它是一种语法糖，与 Davin Tryon 的回答相同。

You can then rewrite this.delta = this.delta.bind(this);to this.delta = ::this.delta;

然后您可以重写this.delta = this.delta.bind(this);为this.delta = ::this.delta;

---

---

For ES6+(ES2015) you can also use the ES6+ arrow function(=>) to be able to use this.

对于ES6+(ES2015)，您还可以使用 ES6+箭头函数( =>) 来使用this.

delta = () => {
    this.setState({
        count : this.state.count + 1
    });
}

Why ? From the Mozilla doc :

为什么 ？来自 Mozilla 文档：

Until arrow functions, every new function defined its own thisvalue [...]. This proved to be annoying with an object-oriented style of programming.

Arrow functions capture the thisvalue of the enclosing context [...]

在箭头函数之前，每个新函数都定义了自己的this值 [...]。事实证明，这对于面向对象的编程风格来说很烦人。

箭头函数捕获封闭上下文的this值 [...]

回答by Tao Wang

There is a difference of context between ES5 and ES6 class. So, there will be a little difference between the implementations as well.

ES5 和 ES6 类之间的上下文存在差异。因此，实现之间也会存在一些差异。

Here is the ES5 version:

这是 ES5 版本：

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

and here is the ES6 version:

这是 ES6 版本：

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

    delta() {
        this.setState({
            count : this.state.count++
        });
    }

    render() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta.bind(this)}>+</button>
            </div>
            );
    }
}

Just be careful, beside the syntax difference in the class implementation, there is a difference in the event handler binding.

请注意，除了类实现中的语法差异外，事件处理程序绑定也存在差异。

In the ES5 version, it's

在 ES5 版本中，它是

              <button onClick={this.delta}>+</button>

In the ES6 version, it's:

在 ES6 版本中，它是：

              <button onClick={this.delta.bind(this)}>+</button>

回答by Ignatius Andrew

When using ES6 code in React always use arrow functions, because the thiscontext is automatically binded with it

在 React 中使用 ES6 代码时总是使用箭头函数，因为this上下文会自动与其绑定

Use this:

用这个：

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

instead of:

代替：

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

回答by Gabo Ruiz

You dont have to bind anything, Just use Arrow functions like this:

你不必绑定任何东西，只需使用这样的箭头函数：

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

    }
    //ARROW FUNCTION
    delta = () => {
        this.setState({
            count: this.state.count++
        });
    }

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}

回答by Jaroslav Benc

You can also use:

您还可以使用：

<button onClick={()=>this.delta()}>+</button>

Or:

或者：

<button onClick={event=>this.delta(event)}>+</button>

If you are passing some params..

如果你正在传递一些参数..

回答by Anil

You need to bind this to the constructor and remember that changes to constructor needs restarting the server. Or else, you will end with the same error.

您需要将此绑定到构造函数并记住对构造函数的更改需要重新启动服务器。否则，您将以相同的错误结束。

回答by Shahrukh Anwar

You have to bind your methods with 'this' (default object). So whatever your function may be just bind that in the constructor.

你必须用'this'（默认对象）绑定你的方法。所以无论你的函数是什么，都只是在构造函数中绑定它。

constructor(props) {
    super(props);
    this.state = { checked:false };

    this.handleChecked = this.handleChecked.bind(this);
}

handleChecked(){
    this.setState({
        checked: !(this.state.checked)
    })
}

render(){
    var msg;

    if(this.state.checked){
        msg = 'checked'
    }
    else{
        msg = 'not checked'
    }

    return (
        <div>               
            <input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} />
            <h3>This is {msg}</h3>
        </div>
    );

回答by hardik chugh

This error can be resolved by various methods-

可以通过多种方法解决此错误-

• If you are using ES5syntax, then as per React js Documentationyou have to use bindmethod.

  Something like this for the above example:

  this.delta = this.delta.bind(this)

• If you are using ES6syntax,then you need not use bindmethod,you can do it with something like this:

  delta=()=>{ this.setState({ count : this.state.count++ }); }

• 如果您使用ES5语法，那么根据React js 文档，您必须使用bind方法。

  上面的例子是这样的：

  this.delta = this.delta.bind(this)

• 如果你使用ES6语法，那么你不需要使用bind方法，你可以用这样的方法来做到：

  delta=()=>{ this.setState({ count : this.state.count++ }); }

回答by Mselmi Ali

There are two solutions of this issue:

这个问题有两种解决方案：

The first solution is add a constructor to your component and bind your function like bellow:

第一个解决方案是向您的组件添加一个构造函数并绑定您的函数，如下所示：

constructor(props) {
        super(props);

        ...

        this.delta = this.delta.bind(this);
    }

So do this:

所以这样做：

this.delta = this.delta.bind(this); 

Instead of this:

取而代之的是：

this.delta.bind(this);

The second solution is to use an arrow function instead:

第二种解决方案是改用箭头函数：

delta = () => {
       this.setState({
           count : this.state.count++
      });
   }

Actually arrow function DOES NOTbind it's own this. Arrow Functions lexically bindtheir context so thisactually refers to the originating context.

实际上箭头函数不绑定它自己的this. 箭头函数在词汇上使用bind它们的上下文，因此this实际上是指原始上下文。

For more information about bind function:

有关绑定函数的更多信息：

Bind functionUnderstanding JavaScript Bind ()

绑定函数理解JavaScript Bind()

For more information about arrow function:

有关箭头函数的更多信息：

Javascript ES6 — Arrow Functions and Lexical this

Javascript ES6——箭头函数和词法 this