React出现TypeError: Cannot read property ‘bind‘ of undefined 时，以及使用bind时点击事件未执行的解决方案

最新推荐文章于 2024-11-19 15:31:36 发布

Mountain-Z

最新推荐文章于 2024-11-19 15:31:36 发布

阅读量6.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： js react 前端

本文链接：https://blog.youkuaiyun.com/qq_41442929/article/details/109543614

本文讲述了在React开发中遇到的TypeError: Cannot read property 'bind' of undefined 错误及其原因，分析了函数执行优先级导致的问题。同时讨论了使用bind创建新函数时，点击事件未执行的状况，并引用MDN对bind的解释。提出了使用React官网推荐的传参方式作为解决方案，以避免这些问题。

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

今天我的一个朋友在做react时出现的一个错误，当然他才接触react没多久出现的错误的地方如下：

在这里插入图片描述

先解释下为什么会出现这个错误，因为函数执行是有一定的优先级的，当你点击事件的时候其实是先执行的this.handleClick() 这个函数，而这个函数没返回值，所以执行完成后返回undefined,这时候在执行this.handleClick().bind()时其实是在执行 undefined.bind(this)所以程序报错

我朋友知道错误后又进行了如下的修改

render() {
    return (
      <div>
        <h2>我是App</h2>
        <button onClick={() => this.handleClick.bind(this, '我是参数')}>click me</button>
      </div>
    )
  }

这紧接着出现了另外一个问题就是当点击按钮时函数未执行的情况，这里贴一下MDN上关于bind的解释

在这里插入图片描述

也就是说bind会返回一个全新的函数，用箭头函数返回的这个新的函数并没有执行

用箭头函数加bind的正确的写法是

//让bind返回的函数立即执行
onClick={() => this.handleClick.bind(this, '我是参数')()}

其实如果你认真看React官网的话官方以及给了两种传参的方式这两种写法都要比使用上面的方式方便

在这里插入图片描述

React出现TypeError: Cannot read property ‘bind‘ of undefined 时，以及使用bind时点击事件未执行的解决方案

今天我的一个朋友在做react时出现的一个错误，当然他才接触react没多久出现的错误的地方如下：

我朋友知道错误后又进行了如下的修改

这紧接着出现了另外一个问题就是当点击按钮时函数未执行的情况，这里贴一下MDN上关于bind的解释

也就是说bind会返回一个全新的函数，用箭头函数返回的这个新的函数并没有执行

用箭头函数加bind的正确的写法是

其实如果你认真看React官网的话官方以及给了两种传参的方式这两种写法都要比使用上面的方式方便

希望我的文章能对您有所帮助