我得到以下错误

无法读取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>
        );
    }
}

当前回答

如果你使用的是ES5语法,那么你需要正确绑定它

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

如果你正在使用ES6及以上版本,你可以使用箭头函数,那么你不需要使用bind()它

delta = () => {
    // do something
  }

其他回答

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

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

你必须用这个关键字绑定新事件,正如我下面提到的…

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

如果任何人在使用axios或任何fetch或get时寻找相同的解决方案,并使用setState将返回此错误。

你需要做的是在外部定义组件,如下所示:

componentDidMount(){
  let currentComponent = this;
  axios.post(url, Qs.stringify(data))
     .then(function (response) {
          let data = response.data;
          currentComponent.setState({
             notifications : data.notifications
      })
   })
}

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

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

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 -箭头函数和词汇这

在ES7+ (ES2016)中,您可以使用实验函数绑定语法操作符::来绑定。这是一种语法糖,和Davin Tryon的答案一样。

然后你可以重写this.delta = this.delta.bind(this);到this.delta =::this.delta;


对于ES6+ (ES2015),您还可以使用ES6+箭头函数(=>)来使用此功能。

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

为什么?来自Mozilla文档:

在箭头函数之前,每个新函数都定义了自己的this值[…]。对于面向对象风格的编程来说,这被证明是令人讨厌的。 箭头函数捕获封闭上下文的this值[…]