无法读取undefined的属性“setState”

我得到以下错误

即使在构造函数中绑定了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>
        );
    }
}

当前回答

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

第一个解决方案是给你的组件添加一个构造函数，并像下面这样绑定你的函数:

constructor(props) {
        super(props);

        ...

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

所以这样做:

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

而不是这样:

this.delta.bind(this);

第二个解决方案是使用箭头函数:

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

实际上箭头函数并不绑定它自己的这个。箭头函数在词法上绑定它们的上下文，因此这实际上引用了原始上下文。

有关bind函数的更多信息:

绑定函数理解JavaScript Bind ()

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

Javascript ES6 -箭头函数和词汇这

2019-08-09 08:14:07

其他回答

<!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 + 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>

2017-12-04 07:54:03

你还可以使用:

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

Or:

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

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

2018-03-12 09:58:05

检查状态检查状态是否创建特定属性

这一点。状态= { 名称:", 电子邮件:”“ ｝ this.setState(() => ({ Comments: Comments //注释状态不可用 }))

2.检查(这个) 如果你在任何函数(即handleChange)中执行setState，检查函数是否绑定到这个函数或函数应该是箭头函数。

## 3种方法绑定到下面的函数##

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

2019-07-05 03:05:17

这是因为这个没有和这个绑定。

为了绑定，在构造函数中设置this.delta = this.delta.bind(this):

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

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

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

2015-08-31 18:19:32

虽然这个问题已经有了答案，但我还是想分享一下我的答案，希望对大家有所帮助:

/* 
 * 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() {
   //....
   }
}

2017-06-17 08:11:24

无法读取undefined的属性“setState”

推荐文章

最新文章

标签