blocks|key|130122|text|这是因为this.delta没有绑定到this。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|130123|为了在构造函数中绑定set+this.delta+=+this.delta.bind(this)：|130124|constructor(props)+{
++++super(props);

++++this.state+=+{
++++++++count+:+1
++++};

++++this.delta+=+this.delta.bind(this);
}|code-block|syntax|javascript|130125|当前，您正在调用bind。但是bind返回一个绑定函数。您需要将函数设置为其绑定值。|130126|entityMap^0|4|A|J|4|0|E|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>This is due to <code>this.delta</code> not being bound to <code>this</code>.</p>

<p>In order to bind set <code>this.delta = this.delta.bind(this)</code> in the constructor:</p>

<pre><code>constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

    this.delta = this.delta.bind(this);
}
</code></pre>

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


blocks|key|130128|text|您需要将其绑定到构造函数，并记住对构造函数的更改需要重新启动服务器。否则，您将以相同的错误结束。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|130129|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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.</p>


blocks|key|130131|text|在ES7%2B+(ES2016)中，您可以使用实验性的function+bind+syntax运算符::进行绑定。这是一种句法上的糖，和Davin+Tryon的答案一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|130132|然后，您可以将this.delta+=+this.delta.bind(this);重写为this.delta+=+::this.delta;|130133|130134|对于+ES6%2B++(ES2015)，您还可以使用ES6%2B+arrow+function+(=>)来使用this。|130135|delta+=+()+=>+{
++++this.setState({
++++++++count+:+this.state.count+%2B+1
++++});
}|code-block|syntax|javascript|130136|为什么？来自Mozilla文档：|130137|130138|直到箭头函数，每个新函数都定义了自己的这个值...事实证明，这对面向对象的编程风格来说很烦人。|blockquote|130139|130140|箭头函数捕获封闭上下文的this值...|130141|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/zenparsing/es-function-bind|1|https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions^0|1|4|1C|2|P|K|0|0|7|Z|19|Q|19|Q|0|0|2|6|19|2|1F|4|T|E|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|D]]|E|@$9|1E|A|1F|1|1G]]|F|$]]|$1|G|3|H|5|6|7|1H|8|@$9|1I|A|1J|B|D]|$9|1K|A|1L|B|D]|$9|1M|A|1N|B|C]]|E|@]|F|$]]|$1|I|3|-4|5|6|7|1O|8|@]|E|@]|F|$]]|$1|J|3|K|5|6|7|1P|8|@$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|D]|$9|1U|A|1V|B|D]]|E|@$9|1W|A|1X|1|1Y]]|F|$]]|$1|L|3|M|5|N|7|1Z|8|@]|E|@]|F|$O|P]]|$1|Q|3|R|5|6|7|20|8|@]|E|@]|F|$]]|$1|S|3|-4|5|6|7|21|8|@]|E|@]|F|$]]|$1|T|3|U|5|V|7|22|8|@]|E|@]|F|$]]|$1|W|3|-4|5|6|7|23|8|@]|E|@]|F|$]]|$1|X|3|Y|5|6|7|24|8|@]|E|@]|F|$]]|$1|Z|3|-4|5|6|7|25|8|@]|E|@]|F|$]]]|10|$11|$5|12|13|14|F|$15|16]]|17|$5|12|13|14|F|$15|18]]]]

<p>In <strong>ES7+</strong> (ES2016) you can use the experimental <a href="https://github.com/zenparsing/es-function-bind" rel="noreferrer">function bind syntax</a> operator <code>::</code> to bind. It is a syntactic sugar and will do the same as Davin Tryon's answer.</p>
<p>You can then rewrite <code>this.delta = this.delta.bind(this);</code> to <strong><code>this.delta = ::this.delta;</code></strong></p>
<hr />
<p>For <strong>ES6+</strong> (ES2015) you can also use the ES6+ <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="noreferrer">arrow function</a> (<code>=&gt;</code>) to be able to use <code>this</code>.</p>
<pre><code>delta = () =&gt; {
    this.setState({
        count : this.state.count + 1
    });
}
</code></pre>
<p>Why ? From the Mozilla doc :</p>
<blockquote>
<p>Until arrow functions, every new function defined its own <em>this</em> value [...]. This proved to be annoying with an object-oriented style of programming.</p>
<p>Arrow functions capture the <em>this</em> value of the enclosing context [...]</p>
</blockquote>


blocks|key|126964|text|在React中使用ES6代码时，请始终使用箭头函数，因为此上下文会自动与其绑定|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|126965|使用这个：|126966|(videos)+=>+{
++++this.setState({+videos:+videos+});
++++console.log(this.state.videos);
};|code-block|syntax|javascript|126967|用代替：|126968|function(videos)+{
++++this.setState({+videos:+videos+});
++++console.log(this.state.videos);
};|126969|entityMap^0|S|1|0|0|5|0|0|1|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>When using ES6 code in React always use arrow functions, because the <strong>this</strong> context is automatically binded with it</p>

<p><strong>Use this:</strong></p>

<pre><code>(videos) =&gt; {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};
</code></pre>

<p><strong>instead of:</strong></p>

<pre><code>function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};
</code></pre>


blocks|key|129353|text|ES5类和ES6类之间存在上下文差异。因此，实现之间也会有一些不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|129354|以下是ES5版本：|129355|var+Counter+=+React.createClass({
++++getInitialState:+function()+{+return+{+count+:+1+};+},
++++delta:+function()+{
++++++++this.setState({
++++++++++++count+:+this.state.count%2B%2B
++++++++});
++++},
++++render:+function()+{
++++++++return+(
++++++++++++<div>
++++++++++++++<h1>{this.state.count}</h1>
++++++++++++++<button+onClick={this.delta}>%2B</button>
++++++++++++</div>
++++++++++++);
++++}
});|code-block|syntax|javascript|129356|下面是ES6版本：|129357|class+Counter+extends+React.Component+{
++++constructor(props)+{
++++++++super(props);
++++++++this.state+=+{+count+:+1+};
++++}

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

++++render()+{
++++++++return+(
++++++++++++<div>
++++++++++++++<h1>{this.state.count}</h1>
++++++++++++++<button+onClick={this.delta.bind(this)}>%2B</button>
++++++++++++</div>
++++++++++++);
++++}
}|129358|请注意，除了类实现中的语法差异之外，事件处理程序绑定也存在差异。|129359|在ES5版本中，它是|129360|++++++++++++++<button+onClick={this.delta}>%2B</button>|129361|在ES6版本中，它是：|129362|++++++++++++++<button+onClick={this.delta.bind(this)}>%2B</button>|129363|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

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

<p>Here is the ES5 version:</p>

<pre class="lang-js prettyprint-override"><code>var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            &lt;div&gt;
              &lt;h1&gt;{this.state.count}&lt;/h1&gt;
              &lt;button onClick={this.delta}&gt;+&lt;/button&gt;
            &lt;/div&gt;
            );
    }
});
</code></pre>



<p>and here is the ES6 version:</p>

<pre class="lang-js prettyprint-override"><code>class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

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

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



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

<p>In the ES5 version, it's</p>

<pre><code>              &lt;button onClick={this.delta}&gt;+&lt;/button&gt;
</code></pre>

<p>In the ES6 version, it's:</p>

<pre><code>              &lt;button onClick={this.delta.bind(this)}&gt;+&lt;/button&gt;
</code></pre>


blocks|key|2901263|text|虽然这个问题已经有了解决方案，但我只想分享我的解决方案，让它变得清晰，希望它能有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2901264|/*+
+*+The+root+cause+is+method+doesn't+in+the+App's+context+
+*+so+that+it+can't+access+other+attributes+of+"this".
+*+Below+are+few+ways+to+define+App's+method+property
+*/
class+App+extends+React.Component+{
++constructor()+{
+++++this.sayHi+=+'hello';
+++++//+create+method+inside+constructor,+context+=+this
+++++this.method+=+()=>+{++console.log(this.sayHi)+};

+++++//+bind+method1+in+constructor+into+context+'this'
+++++this.method1+=+this.method.bind(this)
++}

++//+method1+was+defined+here
++method1()+{
++++++console.log(this.sayHi);
++}

++//+create+method+property+by+arrow+function.+I+recommend+this.
++method2+=+()+=>+{
++++++console.log(this.sayHi);
++}
+++render()+{
+++//....
+++}
}|code-block|syntax|javascript|2901265|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>though this question had a solution already, I just want to share mine to make it be cleared, hope it could help:</p>

<pre><code>/* 
 * The root cause is method doesn't in the App's context 
 * so that it can't access other attributes of "this".
 * Below are few ways to define App's method property
 */
class App extends React.Component {
  constructor() {
     this.sayHi = 'hello';
     // create method inside constructor, context = this
     this.method = ()=&gt; {  console.log(this.sayHi) };

     // bind method1 in constructor into context 'this'
     this.method1 = this.method.bind(this)
  }

  // method1 was defined here
  method1() {
      console.log(this.sayHi);
  }

  // create method property by arrow function. I recommend this.
  method2 = () =&gt; {
      console.log(this.sayHi);
  }
   render() {
   //....
   }
}
</code></pre>


blocks|key|2688730|text|<!DOCTYPE+html>
<html>
++<head>
++++<meta+charset="UTF-8"+/>
++++<title>Hello+World</title>

++++<script+src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
++++<script+src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
++++<script+src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

++</head>
++<body>
++<div+id="root"></div>
++++<script+type="text/babel">

++++++++class+App+extends+React.Component{

++++++++++++constructor(props){
++++++++++++++++super(props);
++++++++++++++++this.state+=+{
++++++++++++++++++++counter+:+0,
++++++++++++++++++++isToggle:+false
++++++++++++++++}
++++++++++++this.onEventHandler+=+this.onEventHandler.bind(this);+++
++++++++++++}

++++++++++++increment+=+()=>{
++++++++++++++++this.setState({counter:this.state.counter+%2B+1});
++++++++++++}

++++++++++++decrement=+()=>{
++++++++++++++++if(this.state.counter+>+0+){
++++++++++++++++this.setState({counter:this.state.counter+-+1});++++
++++++++++++++++}else{
++++++++++++++++this.setState({counter:0});+++++++++++++
++++++++++++++++}
++++++++++++}
++++++++++++//+Either+do+it+as+onEventHandler+=+()+=>+{}+with+binding+with+this++//+object.+
++++++++++++onEventHandler(){
++++++++++++++++this.setState({isToggle:!this.state.isToggle})
++++++++++++++++alert('Hello');
++++++++++++}


++++++++++++render(){
++++++++++++++++return(
++++++++++++++++++++<div>
++++++++++++++++++++++++<button+onClick={this.increment}>+Increment+</button>
++++++++++++++++++++++++<button+onClick={this.decrement}>+Decrement+</button>
++++++++++++++++++++++++{this.state.counter}
++++++++++++++++++++++++<button+onClick={this.onEventHandler}>+{this.state.isToggle+?+'Hi':'Ajay'}+</button>

++++++++++++++++++++</div>
++++++++++++++++++++)
++++++++++++}
++++++++}
++++++++ReactDOM.render(
++++++++<App/>,
++++++++document.getElementById('root'),
++++++);
++++</script>
++</body>
++</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2688731|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;Hello World&lt;/title&gt;

    &lt;script src="https://unpkg.com/react@0.14.8/dist/react.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"&gt;&lt;/script&gt;

  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;

        class App extends React.Component{

            constructor(props){
                super(props);
                this.state = {
                    counter : 0,
                    isToggle: false
                }
            this.onEventHandler = this.onEventHandler.bind(this);   
            }

            increment = ()=&gt;{
                this.setState({counter:this.state.counter + 1});
            }

            decrement= ()=&gt;{
                if(this.state.counter &gt; 0 ){
                this.setState({counter:this.state.counter - 1});    
                }else{
                this.setState({counter:0});             
                }
            }
            // Either do it as onEventHandler = () =&gt; {} with binding with this  // object. 
            onEventHandler(){
                this.setState({isToggle:!this.state.isToggle})
                alert('Hello');
            }


            render(){
                return(
                    &lt;div&gt;
                        &lt;button onClick={this.increment}&gt; Increment &lt;/button&gt;
                        &lt;button onClick={this.decrement}&gt; Decrement &lt;/button&gt;
                        {this.state.counter}
                        &lt;button onClick={this.onEventHandler}&gt; {this.state.isToggle ? 'Hi':'Ajay'} &lt;/button&gt;

                    &lt;/div&gt;
                    )
            }
        }
        ReactDOM.render(
        &lt;App/&gt;,
        document.getElementById('root'),
      );
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
</code></pre>


blocks|key|2901270|text|你必须用'this‘(默认对象)绑定你的方法。所以不管你的函数是什么，只要把它绑定到构造函数中就行了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2901271|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>
++++);|code-block|syntax|javascript|2901272|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>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 (
        &lt;div&gt;               
            &lt;input type='checkbox' defaultChecked = {this.state.checked} onChange = {this.handleChecked} /&gt;
            &lt;h3&gt;This is {msg}&lt;/h3&gt;
        &lt;/div&gt;
    );
</code></pre>


blocks|key|129368|text|您还可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|129369|<button+onClick={()=>this.delta()}>%2B</button>|code-block|syntax|javascript|129370|或者：|129371|<button+onClick={event=>this.delta(event)}>%2B</button>|129372|如果你正在传递一些参数..|129373|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can also use:</p>

<pre><code>&lt;button onClick={()=&gt;this.delta()}&gt;+&lt;/button&gt;
</code></pre>

<p>Or: </p>

<pre><code>&lt;button onClick={event=&gt;this.delta(event)}&gt;+&lt;/button&gt;
</code></pre>

<p>If you are passing some params.. </p>


blocks|key|2901377|text|你不需要绑定任何东西，只需像这样使用箭头函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2901378|class+Counter+extends+React.Component+{
++++constructor(props)+{
++++++++super(props);

++++++++this.state+=+{
++++++++++++count:+1
++++++++};

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

++++render()+{
++++++++return+(
++++++++++++<div>
++++++++++++++++<h1>{this.state.count}</h1>
++++++++++++++++<button+onClick={this.delta}>%2B</button>
++++++++++++</div>
++++++++);
++++}
}|code-block|syntax|javascript|2901379|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You dont have to bind anything, Just use Arrow functions like this: </p>

<pre class="lang-js prettyprint-override"><code>class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

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

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




blocks|key|2901393|text|你必须用下面提到的关键字绑定新的事件...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2901394|class+Counter+extends+React.Component+{
++++constructor(props)+{
++++++++super(props);

++++++++this.state+=+{
++++++++++++count+:+1
++++++++};

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

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

++++render()+{
++++++++return+(
++++++++++++<div>
++++++++++++++++<h1>{this.state.count}</h1>
++++++++++++++++<button+onClick={this.delta}>%2B</button>
++++++++++++</div>
++++++++);
++++++}
++++}|code-block|syntax|javascript|2901395|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you have to bind new event with <strong>this</strong> keyword as i mention below...</p>

<pre><code>class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count : 1
        };

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

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

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


blocks|key|129431|text|只需将绑定语句从have更改为=>+this.delta+=+this.delta.bind(this);即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|129432|entityMap^0|I|Z|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Just change your bind statement from what you have to 
=> 
   <strong>this.delta = this.delta.bind(this);</strong></p>


blocks|key|2901533|text|添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2901534|2901535|+onClick={this.delta.bind()}|blockquote|2901536|2901537|2901538|将会解决这个问题。这个错误发生在我们试图调用ES6类的函数时，所以我们需要绑定这个方法。|2901539|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|M|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|N|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|P|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|K|$]]

<p>Adding </p>

<blockquote>
  <p>onClick={this.delta.bind(this)}</p>
</blockquote>

<p>will solve the problem .
this error comes when we try to call the function of ES6 class ,
So we need to bind the method.</p>


blocks|key|129515|text|这个错误可以通过各种方法来解决-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|129516|129517|如果您使用的是ES5语法，那么根据React+js+Documentation，您必须使用绑定方法。|unordered-list-item|offset|length|style|BOLD|129518|129519|上面的例子是这样的：|129520|this.delta+=+this.delta.bind(this)|CODE|129521|If你正在使用ES6语法，那么你就不需要使用bind方法，你可以这样做：|129522|129523|delta=()=>{+++++this.setState({+++++++++count+:+this.state.count%2B%2B+++++});+}|129524|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/handling-events.html^0|0|0|7|3|19|2|H|M|0|0|0|0|0|Y|0|7|3|M|4|0|0|0|24|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|14|8|@$F|15|G|16|H|I]|$F|17|G|18|H|I]]|9|@$F|19|G|1A|1|1B]]|A|$]]|$1|J|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1D|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1E|8|@$F|1F|G|1G|H|O]]|9|@]|A|$]]|$1|P|3|Q|5|E|7|1H|8|@$F|1I|G|1J|H|I]|$F|1K|G|1L|H|I]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1N|8|@$F|1O|G|1P|H|O]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>This error can be resolved by various methods- </p>

<ul>
<li><p>If you are using <strong>ES5</strong> syntax, then as per <a href="https://reactjs.org/docs/handling-events.html" rel="noreferrer">React js Documentation</a> you 
have to use <strong>bind</strong> method.</p>

<p>Something like this for the above example: </p>

<p><code>this.delta = this.delta.bind(this)</code></p></li>
<li><p>If you are using <strong>ES6</strong> syntax,then you need not use <strong>bind</strong> method,you can 
do it with something like this:</p>

<p><code>delta=()=&gt;{
    this.setState({
        count : this.state.count++
    });
}</code></p></li>
</ul>


blocks|key|128198|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|128199|Check状态检查状态是否创建特定属性|ordered-list-item|offset|length|style|BOLD|128200|128201|​|128202|this.state+=+{
++++++++++++name:+"",
++++++++++++email:+""
++++++++++++}
++++++++++++
+++++++++++
++++++++++++
this.setState(()+=>+({+
+++++++++++++comments:+comments++++++++++//comments+not+available+in+state
+++++++++++++}))+|code-block|syntax|javascript|128203|128204|2.检查(这个)如果你在任何函数内做setState+(即handleChange)检查函数是绑定到这个还是应该是箭头函数。|128205|##将此绑定到以下function##的3种方法|128206|128207|//3+ways+for+binding+this+to+the+below+function

handleNameChange(e)+{++
+++++this.setState(()+=>+({+name+}))
++++}
++++
//+1.Bind+while+callling+function
++++++onChange={this.handleNameChange.bind(this)}
++++++
++++++
//2.make+it+as+arrow+function
+++++handleNameChange((e)=>+{++
+++++this.setState(()+=>+({+name+}))
+++++})
++++
//3.Bind+in+constuctor+

constructor(props)+{
++++++++super(props)
++++++++this.state+=+{
++++++++++++name:+"",
++++++++++++email:+""
++++++++}
++++++++this.handleNameChange+=+this.handleNameChange.bind(this)
++++++++}|128208|128209|entityMap^0|0|0|7|0|0|0|0|0|0|0|J|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|10|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|11|7|@$D|12|E|13|F|G]]|8|@]|9|$]]|$1|H|3|-4|4|5|6|14|7|@]|8|@]|9|$]]|$1|I|3|J|4|5|6|15|7|@]|8|@]|9|$]]|$1|K|3|L|4|M|6|16|7|@]|8|@]|9|$N|O]]|$1|P|3|J|4|5|6|17|7|@]|8|@]|9|$]]|$1|Q|3|R|4|5|6|18|7|@]|8|@]|9|$]]|$1|S|3|T|4|5|6|19|7|@$D|1A|E|1B|F|G]]|8|@]|9|$]]|$1|U|3|J|4|5|6|1C|7|@]|8|@]|9|$]]|$1|V|3|W|4|M|6|1D|7|@]|8|@]|9|$N|O]]|$1|X|3|J|4|5|6|1E|7|@]|8|@]|9|$]]|$1|Y|3|-4|4|5|6|1F|7|@]|8|@]|9|$]]]|Z|$]]

<ol>
<li><strong>Check state</strong> 
         check state whether you create particular property or not </li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>this.state = {
            name: "",
            email: ""
            }
            
           
            
this.setState(() =&gt; ({ 
             comments: comments          //comments not available in state
             })) </code></pre>
</div>
</div>
</p>

<p>2.<strong>Check the (this)</strong> 
             if you doing setState inside any function (i.e handleChange) check whether the function bind to this  or the function should be arrow function .</p>

<p><strong>## 3 ways for binding this to the below function##</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//3 ways for binding this to the below function

handleNameChange(e) {  
     this.setState(() =&gt; ({ name }))
    }
    
// 1.Bind while callling function
      onChange={this.handleNameChange.bind(this)}
      
      
//2.make it as arrow function
     handleNameChange((e)=&gt; {  
     this.setState(() =&gt; ({ name }))
     })
    
//3.Bind in constuctor 

constructor(props) {
        super(props)
        this.state = {
            name: "",
            email: ""
        }
        this.handleNameChange = this.handleNameChange.bind(this)
        }</code></pre>
</div>
</div>
</p>


blocks|key|128225|text|箭头函数可以使您的生活更轻松，避免绑定此关键字。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|128226|+delta+=+()+=>+{
+++++++this.setState({
+++++++++++count+:+this.state.count%2B%2B
++++++});
+++}|code-block|syntax|javascript|128227|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Arrow function could have make your life more easier to avoid binding <strong>this</strong> keyword. Like so:</p>

<pre><code> delta = () =&gt; {
       this.setState({
           count : this.state.count++
      });
   }
</code></pre>


blocks|key|128243|text|这个问题有两种解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|128244|第一个解决方案是向你的组件添加一个构造函数，并像下面这样绑定你的函数：|128245|constructor(props)+{
++++++++super(props);

++++++++...

++++++++this.delta+=+this.delta.bind(this);
++++}|code-block|syntax|javascript|128246|所以要这样做：|128247|this.delta+=+this.delta.bind(this);+|128248|而不是这样：|128249|this.delta.bind(this);|128250|第二种解决方案是使用箭头函数：|128251|delta+=+()+=>+{
+++++++this.setState({
+++++++++++count+:+this.state.count%2B%2B
++++++});
+++}|128252|实际上，箭头函数不会绑定它自己的this。Arrow函数在词法上对其上下文进行bind，因此this实际上指的是起始上下文。|offset|length|style|BOLD|CODE|128253|有关绑定函数的更多信息：|128254|Bind+function+Understanding+JavaScript+Bind+()|128255|有关箭头函数的详细信息，请执行以下操作：|128256|Javascript+ES6+—+Arrow+Functions+and+Lexical+this|128257|entityMap|0|LINK|mutability|MUTABLE|url|https://javascript.info/bind|1|https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/|2|https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4^0|0|0|0|0|0|0|0|0|0|8|2|1K|5|G|4|13|4|1A|4|0|0|0|D|0|E|W|1|0|0|19|4|0|1D|2|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1O|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1P|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1R|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1S|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1T|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1U|8|@$W|1V|X|1W|Y|Z]|$W|1X|X|1Y|Y|Z]|$W|1Z|X|20|Y|10]|$W|21|X|22|Y|10]|$W|23|X|24|Y|10]]|9|@]|A|$]]|$1|11|3|12|5|6|7|25|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|26|8|@]|9|@$W|27|X|28|1|29]|$W|2A|X|2B|1|2C]]|A|$]]|$1|15|3|16|5|6|7|2D|8|@]|9|@]|A|$]]|$1|17|3|18|5|6|7|2E|8|@$W|2F|X|2G|Y|10]]|9|@$W|2H|X|2I|1|2J]]|A|$]]|$1|19|3|-4|5|6|7|2K|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]|1H|$5|1C|1D|1E|A|$1F|1I]]|1J|$5|1C|1D|1E|A|$1F|1K]]]]

<p>There are two solutions of this issue:</p>

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

<pre><code>constructor(props) {
        super(props);

        ...

        this.delta = this.delta.bind(this);
    }
</code></pre>

<p>So do this:</p>

<pre><code>this.delta = this.delta.bind(this); 
</code></pre>

<p>Instead of this:</p>

<pre><code>this.delta.bind(this);
</code></pre>

<p>The second solution is to use an arrow function instead:</p>

<pre><code>delta = () =&gt; {
       this.setState({
           count : this.state.count++
      });
   }
</code></pre>

<p>Actually arrow function <strong>DOES NOT</strong> bind it’s own <code>this</code>. Arrow Functions lexically <code>bind</code> their context so <code>this</code> actually refers to the <strong>originating context</strong>.</p>

<p>For more information about bind function:</p>

<p><a href="https://javascript.info/bind" rel="nofollow noreferrer">Bind function</a>
<a href="https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/" rel="nofollow noreferrer">Understanding JavaScript Bind ()</a></p>

<p>For more information about arrow function:</p>

<p><a href="https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4" rel="nofollow noreferrer">Javascript ES6 — Arrow Functions and Lexical <code>this</code></a></p>


blocks|key|2689182|text|如果您使用的是ES5语法，则需要正确绑定它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2689183|this.delta+=+this.delta.bind(this)|code-block|syntax|javascript|2689184|如果你使用的是ES6和更高版本，你可以使用箭头函数，那么你不需要使用()+it|2689185|delta+=+()+=>+{
++++//+do+something
++}|2689186|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>if your are using ES5 syntax then you need to bind it properly</p>

<pre><code>this.delta = this.delta.bind(this)
</code></pre>

<p>and if you are using ES6 and above you can use arrow function, then you don't need to use <strong>bind()</strong> it </p>

<pre><code>delta = () =&gt; {
    // do something
  }
</code></pre>


blocks|key|2689205|text|如果使用内部axios，请使用中的箭头(=>)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2689206|axios.get('abc.com').then((response)+=>+{})；|2689207|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>If using inside axios , Use the Arrow(=&gt;) in then</p>
<p>axios.get('abc.com').then((response) =&gt; {});</p>


blocks|key|2901749|text|如果任何人在使用axios或任何fetch或get时寻找相同的解决方案，并且使用setState将返回此错误。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2901750|您需要做的是在外部定义组件，如下所示：|2901751|componentDidMount(){
++let+currentComponent+=+this;
++axios.post(url,+Qs.stringify(data))
+++++.then(function+(response)+{
++++++++++let+data+=+response.data;
++++++++++currentComponent.setState({
+++++++++++++notifications+:+data.notifications
++++++})
+++})
}|code-block|syntax|javascript|2901752|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If anyone is looking for the same sulution when using axios, or any fetch or get, and using setState will return this error.</p>
<p>What you need to do, is to define the component outside, as so:</p>
<pre><code>componentDidMount(){
  let currentComponent = this;
  axios.post(url, Qs.stringify(data))
     .then(function (response) {
          let data = response.data;
          currentComponent.setState({
             notifications : data.notifications
      })
   })
}
</code></pre>


<p>I am getting the following error</p>

<blockquote>
  <p>Uncaught TypeError: Cannot read property 'setState' of undefined</p>
</blockquote>

<p>even after binding delta in the constructor.</p>

<pre><code>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 (
            &lt;div&gt;
                &lt;h1&gt;{this.state.count}&lt;/h1&gt;
                &lt;button onClick={this.delta}&gt;+&lt;/button&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>


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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我收到以下错误未捕获TypeError:无法读取未定义的属性“”setState“”即使在构造函数中绑定增量之后也是如此。class Counter extends React.Component {    constructor(props) {        super(props);        this.st...

问React -未捕获TypeError:无法读取未定义的属性“”setState“”
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React -未捕获TypeError:无法读取未定义的属性“”setState“”EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React -未捕获TypeError:无法读取未定义的属性“”setState“”
EN