首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在箭头函数(React)中使用时,Lodash 'get‘不起作用

在箭头函数(React)中使用时,Lodash 'get'不起作用的原因是箭头函数没有自己的this绑定,它会继承外部作用域的this值。而Lodash的'get'函数依赖于this的指向来获取对象的属性值,因此在箭头函数中使用'get'函数时,this指向的是外部作用域的this,而不是当前组件的实例。

解决这个问题的方法是使用普通函数而不是箭头函数来定义React组件的方法。普通函数会有自己的this绑定,可以正确地使用Lodash的'get'函数。

以下是一个示例代码:

代码语言:txt
复制
import React from 'react';
import _ from 'lodash';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        foo: {
          bar: 'baz'
        }
      }
    };
  }

  handleClick() {
    const value = _.get(this.state.data, 'foo.bar');
    console.log(value);
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click me</button>
    );
  }
}

export default MyComponent;

在上面的示例中,我们使用普通函数来定义了handleClick方法,并在render方法中使用bind方法将当前组件实例的this绑定到handleClick方法中。这样就能正确地使用Lodash的'get'函数来获取对象的属性值了。

推荐的腾讯云相关产品:腾讯云函数(云函数是一种事件驱动的无服务器计算服务,可以帮助您更轻松地构建和运行云端应用程序。)。

腾讯云函数产品介绍链接地址:https://cloud.tencent.com/product/scf

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何修复Vue中的 “this is undefined” 问题

使用 fetch 或 axios 获取数据 使用像 lodash 或 underscore 这类的库 理解两种主要的函数类型 JS 中,我们有两种不同的函数。...大多数情况下,我们应该在 Vue 中使用常规函数,特别是创建时 methods computed props watched props 虽然常规函数通常是我们所需要的,但是箭头函数也非常方便。...等等,我们不是刚发现当我们试图访问 this 时,箭头函数不起作用吗? 这就是区别所在。 当我们常规函数或简写函数中使箭头函数时,常规函数将this设置为我们的Vue组件,而箭头函数则不一样。...但是,如果需要将函数传递帮助库,比如lodash或underscore,该怎么办呢 与 Lodash 或 Underscore 一起使用 假设我们的Vue组件上有一个要使用Lodash或Underscore...如果你用过 React ,你可能见过类似的东西。 这是我们用Vue做的。

5K20

Excel VBA解读(143): 自定义函数中使用整列引用时,如何更有效率?

学习Excel技术,关注微信公众号: excelperfect Excel用户经常发现在公式中使用整列的引用很方便,这样可避免每次添加新数据时都必须调整公式。...VBA用户自定义函数中处理此问题的标准方法是获取整列引用和已使用单元格区域的交叉区域,以便用户自定义函数只需处理实际使用的整列的一部分。...执行此操作的一种方法是使用Application对象的AfterCalculate事件(Excel 2007中引入)清空缓存。...然后,只有为每个工作表请求已使用单元格区域的第一个用户自定义函数使用时间来查找已使用的单元格区域,并且(假设计算本身不会改变已使用的单元格区域)将总是检索正确的数字。...注意,只能在Excel 2002及更高版本的用户自定义函数中使用Range.Find,并且除了命令宏或COM之外,不能在XLL中使用Find方法。

2.9K20
  • React useEffect中使用事件监听回调函数中state不更新的问题

    很多React开发者都遇到过useEffect中使用事件监听回调函数中获取到旧的state值的问题,也都知道如何去解决。...state值控制台打印结果如下图片手动实现的简易useEffect中,事件监听回调函数中也会有获取不到state最新值的问题下面根据上面React代码模拟为常规的js代码let obj; // 模拟btn...{ // 模拟修改state值 a += 1; } console.log('App a:', a);}全局作用域的obj对象类似于按钮btn refApp函数类似React...App纯函数组件每次state变化,React 函数会重新执行,所以我们可以进行如下模拟操作图片这个示例的运行过程就比较好理解,第一次执行App函数,初始化数据,Obj可以获取到函数内的a变量,因此,变量...React函数中也是一样的情况,某一个对象的监听事件的回调函数,这个对象相当于全局作用域变量(或者与函数同一层作用域链),回调函数中获取到的state值,为第一次运行时的内存中的state值。

    10.8K60

    内功修炼之lodash——function系列(面试高频考点)

    注意: 三星难度以上的会具体拓展和讲解 文中使用的基本都是数组原生api以及es6+函数式编程,代码简洁且过程清晰 如果说性能当然是命令式好,实现起来稍微麻烦一些而且比较枯燥无味 时代进步,人生苦短...实现lodash的bind的时候,除了兼容正常的函数bind之外,还要兼容传入_的时候的空格的case,并merge初始化参数和调用时参数 curry 正向柯里化 _.curry(func, [arity...难度系数: ★★★★★★ 建议最长用时:20min 我相信,80%的人可以1分钟内写出trailing模式的debounce方法(定时器到了就执行函数定时器还没到期间重复执行函数,定时器重置),...如果提供了 resolver,就用 resolver 的返回值作为 key 缓存函数的结果。 默认情况下用第一个参数作为缓存的 key。 func 用时 this 会绑定在缓存函数上。...如果执行的那个函数内部依赖this,那传入的必须是箭头函数或者bind过this的函数

    1.2K10

    数组原生api以及es6+函数式编程(curry)实现lodash函数

    实现lodash的bind的时候,除了兼容正常的函数bind之外,还要兼容传入_的时候的空格的case,并merge初始化参数和调用时参数 curry 正向柯里化 _.curry(func, [arity...但是在这里还要考虑到lodash的空格以及柯里化函数多次复用 反向柯里化 原理一样,只是取参数的时候从右边往左边取 难度系数:★★★★★★(如果已经实现了正向柯里化curry,难度降为1星) 建议最长用时...难度系数:★★★★★★ 建议最长用时:20min 我相信,80%的人可以1分钟内写出trailing模式的debounce方法(定时器到了就执行函数定时器还没到期间重复执行函数,定时器重置),但是同时支持...如果提供了 resolver,就用 resolver 的返回值作为 key 缓存函数的结果。默认情况下用第一个参数作为缓存的 key。func 用时 this 会绑定在缓存函数上。...如果执行的那个函数内部依赖this,那传入的必须是箭头函数或者bind过this的函数

    80211

    干货 | 减少50%空间,携程机票React Native Bundle 分析与优化

    lodash类库所占用的空间达到了71K,而且也存在很多你用不上的方法。实际上,我们使用中或许只会用到非常少的几个函数。...官方推荐的方式是,用时指定对应的函数,这样最终打包时只会打包对应的函数。 如下所示,如果直接引用 lodash,大小时71K。...javascript import get from 'lodash' // 71K (gzipped: 24.7K) 如果引用对应的函数,那么所需要的空间会大大减少。...javascript import get from 'lodash/get' // 8.2K (gzipped: 2.5K) 通过 Babel 插件配置 babel-plugin-transform-imports...我们的项目中使用到的是 Lodash,官方虽然指出只引入对应模块就会便捷很多。但 Lodash 依然有很多存在依赖关系的内部函数需要一起打包进去。

    1.6K20

    大佬,JavaScript 柯里化,了解一下?

    在此处就不直接贴出 Lodash 中的代码段,感兴趣的同学可以去看看看 Lodash 源码,比较一下这两种实现会导致什么样的差异。...3.箭头函数 handleOnClick(data))} /> 箭头函数能够实现延迟执行,同时也不像 bind 方法必需指定 context。...可能唯一需要顾虑的就是 react 中,会有人反对 jsx 标签内写箭头函数,这样子容易导致直接在 jsx 标签内写业务逻辑。...2.Currying 陷于函数式编程 本文中,提供了一个trueCurrying的实现,这个实现也是最符合 Currying 定义的,也提供了bind,箭头函数等不具备的“新奇”特性——可持续的 Currying...熟悉 ReactReact Native 开发,对前端性能优化有所关注。

    1.4K70

    React Native 启动速度优化——JS 篇(全网最全,值得收藏)

    2.1.2 lodah.js 配合 babel-plugin-lodash lodash 基本上属于 Web 前端的工程标配了,但是对于大多数人来说,对于 lodash 封装的近 300 个函数,只会用常用的几个...,例如 get、 chunk,为了这几个函数全量引用还是有些浪费的。...社区上面对这种场景,当然也有优化方案,比如说 lodash-es,以 ESM 的形式导出函数,再借助 Webpack 等工具的 Tree Sharking 优化,就可以只保留引用的文件。...对于 lodash 这么热门的工具库,社区上肯定有高人安排好了,`babel-plugin-lodash`[7] 这个 babel 插件,可以 JS 编译时操作 AST 做如下的自动转换: import...Fraic 从上面的我们可以看出,React Native 的渲染需要在 Bridge 上传递大量的 JSON 数据, React Native 初始化时,数据量过大会阻塞 bridge,拖慢我们的启动和渲染速度

    2.5K40

    一道React面试题把我整懵了

    onClick={this.handleClick}>你好 }})方案二:render函数中使用bindclass Test extends Component { handleClick...函数中使箭头函数class Test extends Component { handleClick() { console.log(this) } render() { return...//和select相关的逻辑}, []) // 第二个参数是相关的依赖,只有依赖变了,onSelect才会变,设置为空数组,表示永远不变方案四:构造函数中使用bindclass Test extends...面试官的角度: 考bind实现,考react的绑定策略,优缺点,考性能优化策略,考箭头函数, 考原型链,考继承。发散开来,真的很广。...总结:每种绑定方案既然存在就有其存在的理由(除了第一种已经是过去),但是也会有相应的弊端,并没有绝对的谁好谁差,我们使用时,可以根据实际场景做选择。

    41530

    应该在JavaScript中使用Class吗

    因此,「talk 函数里的 this 对应的是调用时的上下文而不是定义时的上下文」,这点跟 Java 和 C++ 的差别很大。...原因是 onClick 被调用时,其实是 talk 函数执行,且talk 函数的this 指向的是 mockDomButton 而不是 Grey ,mockDomButton 并没有 name 属性于是...解决这个问题的办法当然是有的,先介绍两个仍然使用 class 的方案 「方案一」: 使用函数的 bind 方法 ❝**bind()**方法创建一个新的函数bind()被调用时,这个新函数的this被指定为...由于 JavaScript 实现的特殊性, JavaScript 应用中使用 class 对于一些程序员来说有许多坑,于此同时,大多数场景下其他替代方案如 工厂函数 可能更契合JavaScript的特性...至于引擎的代码优化,我持保留意见,之前研究React Hooks的时候,不记得在哪看到过React的官方开发者认为未来 Functional Component 的优化有比 Class Component

    1.1K10

    一道迷惑的React面试题

    onClick={this.handleClick}>你好 }})方案二:render函数中使用bindclass Test extends Component { handleClick...函数中使箭头函数class Test extends Component { handleClick() { console.log(this) } render() { return...//和select相关的逻辑}, []) // 第二个参数是相关的依赖,只有依赖变了,onSelect才会变,设置为空数组,表示永远不变方案四:构造函数中使用bindclass Test extends...面试官的角度: 考bind实现,考react的绑定策略,优缺点,考性能优化策略,考箭头函数, 考原型链,考继承。发散开来,真的很广。...总结:每种绑定方案既然存在就有其存在的理由(除了第一种已经是过去),但是也会有相应的弊端,并没有绝对的谁好谁差,我们使用时,可以根据实际场景做选择。

    24650

    一道React面试题把我整懵了_2023-02-28

    你好 } }) 方案二:render函数中使用bind class Test extends Component {...函数中使箭头函数 class Test extends Component { handleClick() { console.log(this) } render() {...//和select相关的逻辑 }, []) // 第二个参数是相关的依赖,只有依赖变了,onSelect才会变,设置为空数组,表示永远不变 方案四:构造函数中使用bind class Test extends...面试官的角度: 考bind实现,考react的绑定策略,优缺点,考性能优化策略,考箭头函数, 考原型链,考继承。发散开来,真的很广。...总结: 每种绑定方案既然存在就有其存在的理由(除了第一种已经是过去),但是也会有相应的弊端,并没有绝对的谁好谁差,我们使用时,可以根据实际场景做选择。

    42230
    领券