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

当前回答

如果任何人在使用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
      })
   })
}

2022-02-12 21:49:23

其他回答

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

2015-11-16 16:34:00

在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值[…]

2015-12-10 22:36:20

如果使用内部axios，则在then中使用箭头(=>)

Axios.get ('abc.com').then((response) => {});

2021-05-18 11:57:27

只需要更改bind语句 = > this.delta = this.delta.bind(this);

2019-01-01 16:51:31

添加

onClick = {this.delta.bind ()}

就能解决问题。当我们试图调用ES6类的函数时出现这个错误，所以我们需要绑定这个方法。

2019-02-26 10:26:45

无法读取undefined的属性“setState”

推荐文章

最新文章

标签