“React Hook “useFatherMoney“ cannot be called inside a callback. React Hooks must be called in a Rea

React Hook “useFatherMoney” cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.eslintreact-hooks/rules-of-hooks

报错代码

/** @format */

import React, { useState } from "react";

const Son = ({
  money,
  useFatherMoney,
}: {
  money: number;
  useFatherMoney: (money: number) => void;
}) => {
  return (
    <div>
      <p>Father的钱：{money}</p>
      <button onClick={() => useFatherMoney(money - 1)}>拿走父亲一块钱</button>
    </div>
  );
};

const Father = () => {
  const [money, setMoney] = useState<number>(100);
  return <Son money={money} useFatherMoney={setMoney}></Son>;
};

function App() {
  return <Father></Father>;
}

export default App;

解释

错误信息 “React Hook “useFatherMoney” cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.” 指出你尝试在回调函数中调用 Hook（在这种情况下是 useFatherMoney），这是不允许的。根据 React Hooks 的规则，Hooks 只能在 React 函数组件或自定义 Hooks 的顶层调用。

在你的代码中，useFatherMoney 应该是一个用于修改状态的函数，你尝试将其作为 prop 传递给子组件 Son 并在 onClick 事件处理程序中调用它。但是，由于 useFatherMoney 实际上是一个更新状态的函数（在这个例子中是 setMoney），它应该封装在一个自定义 Hook 中，而不是直接作为 prop 传递。

要解决这个问题，你可以创建一个自定义 Hook 来管理状态逻辑，然后在 Father 组件中使用这个 Hook。这里是如何重构你的代码：

import React, { useState } from "react";

// 创建一个自定义 Hook 来管理父亲的钱
const useFatherMoney = (initialMoney) => {
  const [money, setMoney] = useState(initialMoney);

  const takeMoney = (amount) => {
    setMoney(money - amount);
  };

  return { money, takeMoney };
};

const Son = ({ money, takeFatherMoney }) => {
  return (
    <div>
      <p>Father的钱：{money}</p>
      <button onClick={() => takeFatherMoney(1)}>拿走父亲一块钱</button> {/* 调整金额逻辑 */}
    </div>
  );
};

const Father = () => {
  const { money, takeMoney } = useFatherMoney(100);
  return <Son money={money} takeFatherMoney={takeMoney} />;
};

function App() {
  return <Father />;
}

export default App;

在这个重构的版本中：

• 我们创建了一个新的自定义 Hook useFatherMoney，它初始化了 money 状态并提供了 takeMoney 函数来更新状态。
• Father 组件现在使用这个自定义 Hook 来获取 money 状态和更新状态的函数。
• Son 组件接收 money 和 takeFatherMoney 作为 props，并在按钮点击事件中调用 takeFatherMoney。

这样，你就遵循了 Hooks 的规则，并且将状态逻辑封装在了自定义 Hook 中，使得状态管理更加清晰和可重用。