Question

我刚开始反应并收到以下错误：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

情况：在 de index.js 文件中我有

ReactDOM.rend(,document.getElementByID('root'))

在这个文件中，在 document.getElementByID 之前，我使用 react-router-dom 路由到所有不同的页面。其中一个页面包含一个表单，当提交此表单时，我想对该表单的结果做一些事情。

表单有一个 onSubmit 函数，如：

const functionName = () => {
    if (formID === "XXXXXX") {
        <ComponentName/>
    }
}

在这个函数中，我想在调用另一个组件之前检查表单的 ID 是否与某个 ID 匹配。直到此时它完美地工作，该函数被调用，它检查 ID 是否匹配，然后：

调用另一个组件的正确方法是什么？

如果我使用 componentName()，我会收到这个 Invalid Hook 调用，因为 componentName 文件有一些 useState 钩子。如果我使用 <componentName/> 什么也没有发生，控制台日志不会显示在控制台等中。

注意：在 componentName 文件中，我只想获取表单中使用的信息，然后再将其传递给另一个文件。所以 componentName 文件不需要渲染任何东西。

更新：要在页面中加载表单，有一个按钮：<Button fid={id} pageName='pageName'/> 在那个 Button 文件中，我可以毫无问题地使用钩子，该按钮有一个 onClick，如：<button className={pageName} onClick={openTF}>buttonName</button> 然后 openTF 函数会引导到另一个页面，其中在弹出窗口中显示和处理表单：

const openTF = () => {
        Form(props.fid);
    }

从那个文件开始，我不能使用任何钩子

更新2：我发现只有在组件的返回部分才有效。所以我重写了大部分代码，我现在唯一的问题是每次更新 useStates 时都会呈现返回部分。有没有办法在所有 useState 之后制作另一个。现在的方式是返回部分被调用了 4 次，在所有 UseStates 之后我只需要它一次

有人知道我做错了什么吗？

函数调用中 React 中的 Hook 调用无效

0 个答案: