Uncaught TypeError: Cannot read property ‘props‘ of undefined

pleasecallmeTen

于 2021-05-11 11:02:43 发布

阅读量2.3k

点赞数

分类专栏： web开发

本文链接：https://blog.youkuaiyun.com/kaiyuantao/article/details/115477456

版权

web开发专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了在React经典组件中遇到的`this.props`未定义错误，原因是函数式组件中`this`的指向问题。文章解释了常规函数与箭头函数在`this`指向上的区别，并强调了在React中使用箭头函数来正确绑定`this`的重要性，以确保能够访问到组件的属性和方法。此外，还提到了箭头函数不能通过call、apply、bind改变`this`的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错：Uncaught TypeError: Cannot read property 'props' of undefined

代码：在react-class组件中写了个方法，对应监听事件，如下：

onKeyUp(e: any) {
        if (e.keyCode !== 13) {
            return;
        }
        this.props.addItem(e.target.value);
}

原因：this指向的问题。应该要改为箭头函数（arrow function）。

使用常规函数定义，函数this指向由调用时决定，fun1被obj调用，函数this指向obj。


箭头函数的this不是在调用的时候决定的，而是在定义的时候决定的
2.箭头函数的this指向首先看其外部有没有函数，
1）如果有，它的this指向和这个外部函数绑定，当外部函数被调用时， this指向哪里，箭头函数则指向哪里。
2）如果没有外部函数，则箭头函数的this指向Window


箭头函数被调用时的this指向不能够通过call，apply，bind进行绑定，
由于箭头函数的this在定义的时候就决定了，所以不能在其被调用时进行改变