React - uncaught TypeError：无法读取未定义的属性'setState'

javascript reactjs

2022-08-29 23:23:30

我收到以下错误

未捕获的类型错误：无法读取未定义的属性“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>
        );
    }
}

答案 1

这是由于未绑定到。this.deltathis

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

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

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

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

答案 2

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

然后你可以重写为 this.delta = ：：this.delta;this.delta = this.delta.bind(this);

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

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

为什么？来自 Mozilla 文档：

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

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