React项目嵌套箭头函数调用问题：f2无法执行的原因及解决方法

嘿，我来帮你拆解这个问题！首先咱们先看清楚你的f2函数定义：

f2 = (a) => () => { /* sth */ }

这是一个高阶箭头函数——它接收参数a之后，会返回另一个箭头函数。这就是你在f3里调用this.f2()没反应的核心原因：你只是调用了外层的f2，拿到了它返回的内层函数，但并没有执行这个内层函数！

为什么onClick里调用正常？ #

在onClick事件中，你应该是这么用的：

<button onClick={this.f2(someValue)}>点击</button>

这里this.f2(someValue)会返回内层函数，React在触发点击事件时，会自动执行这个返回的内层函数，所以逻辑能正常跑起来。但在f3里，你只做了this.f2()，相当于只拿到了那个内层函数，却没让它执行。

解决方案 #

根据你的业务需求，有两种调整方式：

方式1：在f3里执行f2返回的内层函数

如果需要保留f2作为高阶函数的结构（比如用来给事件处理传参），那在f3里调用时，要多加一对括号执行内层函数：

f3 = (b) => () => { 
  this.f1(); 
  // 传入a的参数，然后执行返回的内层函数
  this.f2(/* 这里填a的具体值，比如b或者其他变量 */)(); 
}

如果f2的参数a不需要，直接写this.f2()()就行。

方式2：修改f2为单层箭头函数

如果f2不需要返回函数，只是普通的类方法，那可以把它改成单层箭头函数：

f2 = (a) => { /* sth */ }

这样在f3里直接this.f2(yourAValue)就能执行逻辑了，不过这个改法要考虑是否影响其他地方（比如原来的onClick调用），如果原来的onClick是依赖f2返回函数的，那这个方式就不适用。

关于你猜测的this绑定问题 #

其实这里不是this上下文的问题！因为f2是类属性箭头函数，已经自动把this绑定到类实例上了，你调用this.f2()的时候能正确拿到返回的函数，只是没执行它而已～

内容的提问来源于stack exchange，提问作者malutki5200