我不能把我的饼干放在下一个。错误:无法读取空属性(读取'useContext')

Question

在下一个实现中没有错误，我只是想设置cookie，但不知道如何做。

auth.js

import { useCookies } from "react-cookie";
import { setCookies } from 'cookies-next';
import { useEffect } from "react";

const AuthReducer = (action) => {
    const [cookie, setCookie] = useCookies(["user"]);
    switch(action.action) {
         case "Register":
            console.log("completed");
            setCookie("user", JSON.stringify(action.token), {
                path: "/",
                maxAge: 3600 * 24, // Expires After 1hr
                sameSite: true,
              });
              console.log("completed");
              return true;
        default:
            return action;
    }
}

export default AuthReducer;

...nextauth.js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import axios from "axios";

import AuthReducer from "../../../reducer/auth";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId:
        process.env.cid,
      clientSecret: process.env.sid,
    }),
    // ...add more providers here
  ],
  callbacks: {
    async signIn({ account, profile }) {
      if (account.provider == "google") {
        const res = await axios.post("http://localhost:5000/user/googlelogin", {
          object: profile,
        });
        try{
          console.log(res.data.status);
          const data = AuthReducer({ action: res.data.status, token: res.data.token })

          
          console.log(data);
        }catch(err){
          console.log(err)
        }
        return profile.email_verified;
      }
      return true; // Do different verification for other providers that don't have `email_verified`
    },
  },
});

错误

Warning: 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.
TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (D:\FreeLancing\project 0\project0\node_modules\react\cjs\react.development.js:1616:21)
    at useCookies (D:\FreeLancing\project 0\project0\node_modules\react-cookie\cjs\useCookies.js:17:39)
    at AuthReducer (webpack-internal:///(api)/./reducer/auth.js:15:89)
    at Object.signIn (webpack-internal:///(api)/./pages/api/auth/[...nextauth].js:32:91)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.callback (D:\FreeLancing\project 0\project0\node_modules\next-auth\core\routes\callback.js:89:29)
    at async NextAuthHandler (D:\FreeLancing\project 0\project0\node_modules\next-auth\core\index.js:139:28)
    at async NextAuthNextHandler (D:\FreeLancing\project 0\project0\node_modules\next-auth\next\index.js:21:19)
    at async D:\FreeLancing\project 0\project0\node_modules\next-auth\next\index.js:57:32

我不明白为什么它会显示这个错误TypeError:无法读取null的属性(读取'useContext')。我被困住了，能不能有人帮我解决这个问题，会有很大的帮助。谢谢

Answer 1

如果你看一下你的警告，第二个理由可能指向正确的方向。

You might be breaking the Rules of Hooks.

反应文档说:不要从常规的JavaScript函数中调用钩子。

您只能从反应性组件或其他钩子调用钩子。但AuthReducer不是他们中的一员。

从您的用例来看，AuthReducer不能转换为钩子或功能组件。您最好使用它作为一个正常的JS函数。

您使用的钩子侦听user cookie中的更改，并重新选择在其中使用的组件。

如果您只想设置cookie，请遵循这

以下是一次尝试：

const AuthReducer = (action) => {
    switch(action.action) {
         case "Register":
            console.log("completed");
            document.cookie = "user=" + JSON.stringify(action.token) + JSON.stringify({
                path: "/",
                maxAge: 3600 * 24, // Expires After 1hr
                sameSite: true,
              });
              console.log("completed");
              return true;
        default:
            return action;
    }
}