React 17.0.1：无效的钩子调用。钩子只能在函数组件体内调用

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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

我已多次阅读链接的故障排除页面，并尝试修复所有三个可能的原因，但没有成功。

1. 我在react我react-dom的devDependencies.
2. 我已经安装了eslint-plugin-react-hooks规则来确定我是否没有在功能组件中正确使用钩子。
3. 我已经使用npm ls react和npm ls react-dom来确认我没有重复的反应版本。

登录表单.jsx

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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

我在项目的存储库上创建了一个分支，以便您可以查看任何其他信息：

分支： https: //github.com/GibsDev/node-password-manager/tree/login-conversion

提交： https: //github.com/GibsDev/node-password-manager/commit/e0714b16bdbbf339fabf1aa4f6eefacd6d053427

Answer 1

您将其loginForm视为普通函数而不是 React 组件来调用：

const loginForm = LoginForm({
    onToken: token => {
        const url = new URL(window.location.href);
        const returnurl = url.searchParams.get('returnurl');
        if (returnurl) {
            window.location.href = decodeURIComponent(returnurl);
        } else {
            window.location.href = '/';
        }
    }
});

ReactDOM.render(loginForm, domContainer);

结果，它没有被包装在 中React.createElement，因此它认为钩子调用无效。

请改用 JSX 语法：

const onToken = token => {
        const url = new URL(window.location.href);
        const returnurl = url.searchParams.get('returnurl');
        if (returnurl) {
            window.location.href = decodeURIComponent(returnurl);
        } else {
            window.location.href = '/';
        }
}

ReactDOM.render(<LoginForm onToken={onToken} />, domContainer);
          //    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^