在 Firebase 应用中使用 react useState 挂钩时出现无效的钩子调用错误

Question

我正在尝试让反应钩子工作。 下面是函数组件：

function useHooksExample() {
const [foo, setFoo] = useState(0);
setFoo(5);
return foo;
}

我称之为：

useHooksExample();

我收到如下错误：

错误：挂钩调用无效。钩子只能在身体内部调用 函数组件。以下情况之一可能会发生这种情况 原因： 1. 你可能有不匹配的 React 和渲染器版本(比如 React DOM( 2.你可能违反了钩子的规则 3. 您可能在同一应用程序中有多个 React 副本。

我已经调试并确认我使用的是单个反应版本。也许我错误地使用了状态钩子？

---

这是我调用自定义钩子的地方：

class TableData extends Component {
componentDidMount() {
useHooksExample();
}
}
export default TableData;

Answer 1

钩子仅用于函数组件内部。您可以将TableData转换为函数组件以使用钩子：

export default function TableData() {
const foo = useHooksExample();
return <div />;
}

这在 Hooks 规则的 "仅从 React 函数调用钩子" 部分有介绍。