函数 A 调用函数 B，而函数 B 单元格函数 A：ESLint 给出错误：在定义之前使用了“函数”答案

【问题标题】：Function A calls function B, while function B calls function A: ESLint gives error: 'functionB' was used before it was defined函数 A 调用函数 B，而函数 B 单元格函数 A：ESLint 给出错误：在定义之前使用了“函数”
【发布时间】：2021-03-31 06:17:53
【问题描述】：

假设我有以下场景：首先定义一个函数A，并在里面调用函数B；然后定义函数B并调用函数A。代码如下：

import { useState } from "react";

export default function App() {
  const [action, setAction] = useState("walk");

  const functionA = () => {
    if (action === "walk") {
      functionB();
    }
    setAction("run");
  };

  const functionB = () => {
    if (action === "run") {
      functionA();
    }
    setAction("walk");
  };

  return (
    <div className="App">
      <button onClick={functionA}>button A {action}</button>
      <button onClick={functionB}>button B {action}</button>
    </div>
  );
}

先点击再点击第二个按钮看看效果。工作示例here。

代码运行良好，因为我使用setAction 确保不会发生循环。但是 ESLint 给了我错误：

'functionB' was used before it was defined.

我的代码有问题吗？我知道我可以禁用 ESLint 规则，但我很担心。

【问题讨论】：

const 函数表达式不会像常规函数声明那样被提升。所以 linter 知道
如果是这样，为什么它仍然有效？我是否必须将箭头函数更改为普通函数定义才能避免这种情况？
它执行得很好，因为直到它们被定义后才会被调用
如何修复它取决于您。如果它们是常规声明，Linter 不应该抱怨，因为它们会被吊起。但是你必须做一些绑定才能在其中使用组件this
@charlietfl 你能在答案下面回答我的问题吗？

标签： javascript reactjs eslint

【解决方案1】：

Eslint 会因为提升问题而抱怨，但代码仍然有效并且它确实有效，因为调用本身是在定义之后调用的（在您单击按钮之后），但 Eslint 不知道这一点并且唯一解决这个问题的方法是使用带有 function 关键字的常规函数。



  function functionA (){
    if (action === "walk") {
      functionB();
    }
    setAction("run");
  };

  function functionB (){
    if (action === "run") {
      functionA();
    }
    setAction("walk");
  };

【讨论】：

如果我有这样的 useCallback 函数：const functionA = useCallback(() => {blabla}, [])，如何将其更改为常规函数？
在这种情况下，你是对的，但 Eslint 给你这个错误仍然是对的，因为即使在你发现的这种极端情况下也最好遵守规则。这仍然是我的看法，这可能是错误的。