Reactjs 在Docker容器中运行的NextJS不会'；不要改变习惯 我想做什么？

我正在docker中运行下一个应用程序，并尝试使用自定义挂钩从API获取数据

我的钩子看起来像这样：

/* eslint-disable @typescript-eslint/camelcase */
import { useState } from "react"
import useFetch from "./useFetch";

export default async function useAuth() {
  const [fetching, setFetching] = useState(true);
  const { response: authentication, error, request } = useFetch(
    "https://api.company.io/oauth/token",
    {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        grant_type: "client_credentials",
        client_id: process.env.CLIENT_ID,
        client_secret: process.env.CLIENT_SECRET,
        audience: "https://api.company.com/"
      })
    }
  );

  if (fetching) {
    await request();
    setFetching(false)
  }

  if (!error) {
    return JSON.parse(JSON.stringify(authentication));
  }

  return { error };
}

我在Nextjs的getServerSideProps函数中调用这个钩子

Index.tsx

// imports

const Home: React.FC = () => {

  const res = useUserData()
  const [profile, setProfile] = useState({})

  const onSubmit = () => {
    setProfile(res)
    console.log(res)
  }


return(
  <Phone>
      // Form
      
          <Button href="/live" text="Start!" handleClick={() => onSubmit()} />

      // Closing tags
    </Phone>
)
}


export async function getServerSideProps() {
  const res = useAuth().then(res => console.log(res.json()))
                        .catch(error => console.log(error))
  
  return {
    props: {}
  }
}

export default Home

会发生什么？ 我得到这个错误-我已经包括了整个docker撰写日志

Recreating app ... done
Attaching to app
app    | yarn install v1.22.5
app    | [1/4] Resolving packages...
app    | success Already up-to-date.
app    | Done in 0.58s.
app    | yarn run v1.22.5
app    | $ next dev -p 8080
app    | ready - started server on 0.0.0.0:8080, url: http://localhost:8080
app    | info  - Loaded env from /usr/app/.env
app    | info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
app    | event - compiled successfully
app    | event - build page: /
app    | wait  - compiling...
app    | event - compiled successfully
app    | 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:     
app    | 1. You might have mismatching versions of React and the renderer (such 
as React DOM)
app    | 2. You might be breaking the Rules of Hooks
app    | 3. You might have more than one copy of React in the same app
app    | See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
app    |     at resolveDispatcher (/usr/app/node_modules/react/cjs/react.development.js:1476:13)
app    |     at useState (/usr/app/node_modules/react/cjs/react.development.js:1507:20)
app    |     at useAuth (webpack-internal:///./utilities/hooks/useAuth.ts:13:61)app    |     at getServerSideProps (webpack-internal:///./pages/index.tsx:100:86)
app    |     at renderToHTML (/usr/app/node_modules/next/dist/next-server/server/render.js:40:221)
app    |     at runMicrotasks (<anonymous>)
app    |     at processTicksAndRejections (internal/process/task_queues.js:93:5)app    |     at async /usr/app/node_modules/next/dist/next-server/server/next-server.js:112:97
app    |     at async /usr/app/node_modules/next/dist/next-server/server/next-server.js:105:142
app    |     at async DevServer.renderToHTMLWithComponents (/usr/app/node_modules/next/dist/next-server/server/next-server.js:137:387)
app    |     at async DevServer.renderToHTML (/usr/app/node_modules/next/dist/next-server/server/next-server.js:138:610)
app    |     at async DevServer.renderToHTML (/usr/app/node_modules/next/dist/server/next-dev-server.js:36:578)
app    |     at async DevServer.render (/usr/app/node_modules/next/dist/next-server/server/next-server.js:75:160)
app    |     at async Object.fn (/usr/app/node_modules/next/dist/next-server/server/next-server.js:58:672)
app    |     at async Router.execute (/usr/app/node_modules/next/dist/next-server/server/router.js:25:67)
app    |     at async DevServer.run (/usr/app/node_modules/next/dist/next-server/server/next-server.js:68:1042)

正在重新创建应用程序。。。完成
附加到应用程序
app |纱线安装v1.22.5
应用程序|[1/4]解析包。。。
应用程序|成功已经是最新的。
应用程序|在0.58秒内完成。
app |纱线运行v1.22.5
应用程序|$next dev-p 8080
应用程序|已准备就绪-已启动0.0.0:8080上的服务器，url:http://localhost:8080
app | info-从/usr/app/.env加载环境
应用程序|信息-使用网页4。原因：next.config.js中的自定义网页包配置https://nextjs.org/docs/messages/webpack5
应用程序|事件-已成功编译
应用程序|事件-构建页面：/
应用程序|等待-编译。。。
应用程序|事件-已成功编译
应用程序|错误：钩子调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：
附录| 1。React和渲染器的版本可能不匹配（例如
如图所示（DOM）
附录2。你可能违反了钩子的规则
附录| 3。同一应用程序中可能有多个React副本
附录|见https://reactjs.org/link/invalid-hook-call 有关如何调试和修复此问题的提示。
app | at resolvedpatcher（/usr/app/node_modules/react/cjs/react.development.js:1476:13）
app | at useState（/usr/app/node_modules/react/cjs/react.development.js:1507:20）
应用程序|在useAuth（网页包-internal:///./utilities/hooks/useAuth.ts:13:61)应用程序|位于getServerSideProps（网页包-internal:///./pages/index.tsx:100:86)
app |在renderToHTML（/usr/app/node_modules/next/dist/next server/server/render.js:40:221）
app |在runMicrotasks上（但我仍然收到相同的错误，这里有人能帮忙吗？
不能在getServerSideProps中使用钩子。
您可以使用此方法获取：
你能公布项目的来源吗？你能进一步澄清这个问题吗？编辑问题以包含一个链接并解释你看到的行为会很有帮助。确保将足够的相关代码作为文本（而不是图像）直接包含在问题中（而不是链接后面）因此，有人看了这个问题就有足够的信息来诊断问题。@DavidMaze我已经更新了帖子，并包含了我认为相关的任何代码，如果缺少任何东西，请让我知道！@Oleg不幸的是，由于隐私问题，我认为问题不在这里。我确实相信在getServerSideProps中不可能出现此问题，所以到此为止e需要修复的东西，但我不能在我的代码中的任何地方使用钩子。我可以用另一个例子更新这个问题？我的答案基于你发布的代码。修复它，看看你是否有其他错误。我修复了它，但正如我提到的，我的其他钩子也不起作用。我被相同的错误卡住了，只有在不同的钩子上，我现在可以更新帖子了，但我认为它会变得太长。如果您需要帮助，请发布其他错误和代码。我认为您也有类似的问题……我已经更新了该问题，感谢您的时间和努力！
Recreating app ... done
Attaching to app
app    | yarn install v1.22.5
app    | [1/4] Resolving packages...
app    | success Already up-to-date.
app    | Done in 0.58s.
app    | yarn run v1.22.5
app    | $ next dev -p 8080
app    | ready - started server on 0.0.0.0:8080, url: http://localhost:8080
app    | info  - Loaded env from /usr/app/.env
app    | info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
app    | event - compiled successfully
app    | event - build page: /
app    | wait  - compiling...
app    | event - compiled successfully
app    | 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:     
app    | 1. You might have mismatching versions of React and the renderer (such 
as React DOM)
app    | 2. You might be breaking the Rules of Hooks
app    | 3. You might have more than one copy of React in the same app
app    | See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
app    |     at resolveDispatcher (/usr/app/node_modules/react/cjs/react.development.js:1476:13)
app    |     at useState (/usr/app/node_modules/react/cjs/react.development.js:1507:20)
app    |     at useAuth (webpack-internal:///./utilities/hooks/useAuth.ts:13:61)app    |     at getServerSideProps (webpack-internal:///./pages/index.tsx:100:86)
app    |     at renderToHTML (/usr/app/node_modules/next/dist/next-server/server/render.js:40:221)
app    |     at runMicrotasks (<anonymous>)
app    |     at processTicksAndRejections (internal/process/task_queues.js:93:5)app    |     at async /usr/app/node_modules/next/dist/next-server/server/next-server.js:112:97
app    |     at async /usr/app/node_modules/next/dist/next-server/server/next-server.js:105:142
app    |     at async DevServer.renderToHTMLWithComponents (/usr/app/node_modules/next/dist/next-server/server/next-server.js:137:387)
app    |     at async DevServer.renderToHTML (/usr/app/node_modules/next/dist/next-server/server/next-server.js:138:610)
app    |     at async DevServer.renderToHTML (/usr/app/node_modules/next/dist/server/next-dev-server.js:36:578)
app    |     at async DevServer.render (/usr/app/node_modules/next/dist/next-server/server/next-server.js:75:160)
app    |     at async Object.fn (/usr/app/node_modules/next/dist/next-server/server/next-server.js:58:672)
app    |     at async Router.execute (/usr/app/node_modules/next/dist/next-server/server/router.js:25:67)
app    |     at async DevServer.run (/usr/app/node_modules/next/dist/next-server/server/next-server.js:68:1042)