reactjs - NextJS (React) - 错误：无效的钩子调用 (useState)

Question

我正在使用 NextJS 进行服务器端渲染，并且我正在尝试在正在抛出的组件内使用 useState 钩子：

错误：

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

我的代码：

import { useState } from 'react';

const Banner = ({ movies }) => {
    const [movie, setMovie] = useState(movies);

    return (
        <header>
            <h1> Banner </h1>
        </header>
    )
}

export default Banner;

目录树

/components/Banner.js
/pages

当我使用 useEffect() 时出现相同的错误：

从“反应”导入反应，{useEffect}

标签： reactjsreact-reduxnext.jsserver-side-rendering