React函数组件授权成功回调内调用箭头函数报错问题咨询

这个问题和React框架没有关联，本质是JavaScript中函数提升和变量提升的规则差异导致的：

• 使用function关键字声明的函数存在「函数提升」特性：JS在预编译阶段会把完整的函数定义提升到当前作用域的最顶部，只要函数和调用逻辑在同一个作用域内，不管声明位置在调用前还是调用后，都可以正常执行。
• 使用const/let声明的箭头函数本质是变量赋值操作：只有变量的声明会被提升，赋值逻辑不会提升，同时const声明的变量在完成赋值前处于「暂时性死区」，此阶段访问变量会直接抛出错误。你的代码中先执行了myAuth.authorize方法注册回调，之后才完成箭头函数的赋值，若onsuccess回调同步触发，此时callinganotherFunction还未完成赋值，自然会抛出not a function的错误。

你可以选择以下任意一种方案解决问题：

• 调整箭头函数的声明顺序，把箭头函数放到所有调用它的逻辑之前
  示例代码：

  const myApp = () => {
    // ... 其他变量声明
    // 先完成箭头函数的赋值
    const callinganotherFunction = () => {
      // 方法逻辑
    }
  
    myAuth.authorize({
      service: 'test',
      credentials: {},
      onsuccess:() => {
          callinganotherFunction();
      },
      fail() {}
    });
  }
  
  export default myApp
  

• 继续使用function关键字声明方法：如果没有特殊的this绑定需求，function声明的函数可以天然享受函数提升特性，不需要调整代码顺序，也是合理的写法。
• 额外注意：如果你的onsuccess是异步触发的，理论上等回调执行时组件函数已经执行完毕，箭头函数已经完成赋值，不会触发报错，但为了代码的可维护性和避免潜在问题，仍然建议把函数声明放到调用逻辑之前。

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