React Hook“useCustomHook”被有条件地调用。 React Hooks 必须在每个组件渲染中以完全相同的顺序调用

Question

当我想在 customHook 中设置 if 时出现错误 代码

此后我收到错误->

React Hook "" is called conditionally. React Hooks must be called in the exact same order in every component render 

问题是 if 语句称此工作良好（没有 if ）->

 const =(,());

如果 dataValid 无效且已填充，我不想加载 useDataForm （自定义挂钩）。

Answer 1

根据 React 文档，你不能有条件地调用钩子。

这里深入解释了原因。

当需要有条件地调用钩子时，您可以选择两种解决方案：

1. 要么调用

   useDataForm

   ，然后仅当

   contactForm

   是

   dataValid

    时才使用 

   true

const contactForm = useDataForm(onSubmit, modelToForm(dataValid));
if (dataValid) {
    // do what you need to do with dataValid
}
// or 
return <Child data={dataValid ? contactForm : otherData} />

2. 要么将钩子移动到单独的组件中，然后仅当

   dataValid

   为 true
时才渲染该组件
3. 或者，根据钩子，您可以有条件地传递参数。例如在你的例子中：

const contactForm = useDataForm(onSubmit, dataValid   ? modelToForm(dataValid) : fallbackArg);

编辑：

React 的金丝雀版本引入了

use

，这是一个新的 hook，很可能会成为 React 19 版本中的标准功能。此挂钩取代了不能有条件或在循环内调用挂钩的规则。您可能会找到一种使用此钩子的方法来解决自定义钩子的难题。 然而，值得注意的是，其他钩子规则仍然有效。具体来说，钩子仍然必须在组件或其他钩子的顶层调用。

Answer 2

我们不能在条件语句、循环或嵌套函数中调用 Hook，以确保每次组件渲染时都以相同的顺序调用 Hook。该顺序对于 React 如何将 Hook 调用与组件关联起来很重要。

资源：https://www.benmvp.com/blog/conditional-react-hooks/#:~:text=We%20can%27t%20call%20Hooks，关联%20Hook%20calls%20with%20components。

您可以查看此资源也许会有帮助