react - 未捕获的类型错误：无法读取未定义的属性“setState”

IT技术 javascript reactjs
2021-02-04 15:27:03

我收到以下错误

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

这是由于this.delta没有绑定到this.

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

constructor(props) {
    super(props);

    this.state = {
        count : 1
    };

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

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

我明白你的意思，但如果我在 componentWillMount() 中编写代码，那么我将如何绑定
2021-03-25 15:27:03
@AgmLauncher 我认为这不是 ES6 类本身的问题，而是 React 组件工作方式的问题。
2021-03-28 15:27:03
@AgmLauncher 使用 Lambda 函数隐式绑定它。如果你定义delta为delta = () => { return this.setState({ count: this.state.count++ }); };代码也可以。在这里解释： hackernoon.com/...
2021-04-01 15:27:03
如果 ES6 类的方法没有适当的词法this绑定，并且甚至不公开直接在定义上绑定上下文的语法，那么ES6 类的重点是什么！？
2021-04-02 15:27:03
@sureshparek 一旦你在构造函数中绑定了你的函数，那么当你从任何生命周期钩子调用它时它应该被绑定。
2021-04-09 15:27:03

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

然后您可以重写this.delta = this.delta.bind(this);为this.delta = ::this.delta;

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

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

为什么 ？来自 Mozilla 文档：

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

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

绑定语法不是 ES2016 或 ES2017 的一部分。
2021-03-22 15:27:03
除了语法之外，使用一种方法比另一种方法有什么优势？
2021-03-27 15:27:03
绑定语法更清晰，因为您可以保留方法的正常范围。
2021-04-03 15:27:03
@stackoverflow 应该添加为任何答案添加赏金的能力。
2021-04-08 15:27:03
很好的文章详细描述了这一点：reactkungfu.com/2015/07/...
2021-04-10 15:27:03

ES5 和 ES6 类之间的上下文存在差异。因此，实现之间也会有一些差异。

这是 ES5 版本：

var Counter = React.createClass({
    getInitialState: function() { return { count : 1 }; },
    delta: function() {
        this.setState({
            count : this.state.count++
        });
    },
    render: function() {
        return (
            <div>
              <h1>{this.state.count}</h1>
              <button onClick={this.delta}>+</button>
            </div>
            );
    }
});

这是 ES6 版本：

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count : 1 };
    }

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

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

请注意，除了类实现中的语法差异外，事件处理程序绑定也存在差异。

在 ES5 版本中，它是

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

在 ES6 版本中，它是：

              <button onClick={this.delta.bind(this)}>+</button>
在 JSX 中使用箭头函数或绑定是一种不好的做法。stackoverflow.com/questions/36677733/...。
2021-03-16 15:27:03

你不必绑定任何东西，只需像这样使用箭头函数： 

class Counter extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 1
        };

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

    render() {
        return (
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.delta}>+</button>
            </div>
        );
    }
}
带有箭头函数的 this 作用域是从上下文继承的。对于常规函数， this 总是指最近的函数，而对于箭头函数，这个问题就被消除了，你不需要再写 var that = this 了。@RezzagRidha
2021-03-11 15:27:03
截至2019年，这是要走的路（Y）
2021-03-23 15:27:03
那有什么区别请问这是为什么？
2021-04-03 15:27:03

在 React 中使用 ES6 代码时总是使用箭头函数，因为this上下文会自动与其绑定

用这个：

(videos) => {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};

代替：

function(videos) {
    this.setState({ videos: videos });
    console.log(this.state.videos);
};
这就是为我所做的。我是 node 的新手，axios module的文档与 react 和 setState 不兼容
2021-03-27 15:27:03
如果使用箭头函数并且参数变量与关键变量相同，我建议将其用作 this.setState({videos});
2021-04-02 15:27:03
其它你可能感兴趣的问题
上一篇JQuery .each() 向后 下一篇在 JavaScript 中按名称读取 cookie 的最短函数是什么？