在firebase应用程序内使用react-useState钩子时出现无效钩子调用错误

Question

我正努力让你去工作。以下是功能组件：

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

我称之为：

useHooksExample();

我得到一个错误，如下所示：

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

我已经调试并确认我使用的是单一版本。也许我使用状态钩子不正确？

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

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

Answer 1

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

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

钩子规则的“仅从React函数调用钩子”部分介绍了这一点。