在Firebase应用程序中使用react useState挂钩时无效的挂钩调用错误

Question

我正在努力使反应钩子起作用。这是功能组件：

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

我通过以下方式致电

：

useHooksExample();

我收到如下错误：

  

错误：无效的挂接调用。挂钩只能在身体内部使用   功能组件。可能发生以下情况之一   原因：   1.您的React和渲染器版本可能不匹配（例如React DOM）   2.您可能违反了《钩子规则》   3.您可能在同一应用程序中拥有多个React副本。

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

---

在这里我从以下位置调用自定义钩子：

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

Answer 1

挂钩仅在功能组件内部使用。您可以将TableData转换为功能组件以使用您的钩子：

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

《钩子规则》的“ Only Call Hooks from React Functions”部分对此进行了介绍。