Блог

Главная - Вопросы по программированию - вставьте токен в useReducer с помощью useContext в nextjs и получите неопределенный

вставьте токен в useReducer с помощью useContext в nextjs и получите неопределенный

#reactjs #jwt #next.js #use-context #use-reducer

Вопрос:

У меня проблемы с использованием useReducer с useContext в Next.js. Я хочу использовать токен , который пользователь уже сделал с useReducer помощью и useContext , но когда я пытаюсь, он не определен. Я не знаю, что мне делать?

Это мой файл кода: введите описание изображения здесь

Это мое AuthToken.js досье:

 import React, { createContext, useEffect, useReducer } from 'react';
// Create context
export const AuthToken = createContext();

const initialState = {
    auth: {}, 
    user: []
};

const ACTIONS = {
    AUTH: "AUTH",
    ADD_USERS: "ADD_USERS"
};

const reducer = (stateAuth, action) => {
    switch(action.type) {
        case ACTIONS.AUTH:
            return {
                ...stateAuth,
                auth: action.payload
            };
        case ACTIONS.ADD_USERS:
            return {
                ...stateAuth,
                user: action.payload
            };
        default:
            return stateAuth;
    };
};

export function DataProvider({children}) {
    const {stateAuth, dispatchAuth} = useReducer(reducer, initialState);

    useEffect(() => {
        const firstLogin = localStorage.getItem("firstLogin");
        if (firstLogin === true) {
            async (token) => {
                const res = await fetch("http://localhost:3000/api/users/", {
                    method: "GET",
                    headers: {
                        "Authorization": token
                    }
                });
                await res.json().then(res => {
                    res.err ? localStorage.removeItem("firstLogin") : dispatchAuth({
                        type: ACTIONS.AUTH,
                        payload: {
                            token: res.accessToken,
                            user: res.user
                        }
                    });
                });
            };
        };
    }, []);

    return (
        <AuthToken.Provider value={{stateAuth, dispatchAuth}}>
            {children}
        </AuthToken.Provider>
    );
};

Этот код для получения токена из папки api в Next.js (в любом случае, я использую next-connect ):

 import dbConnect from '../../../utils/dbConnect';
import User from '../../../model/User';
import handler from '../../../components/handler';
import { hash } from 'bcrypt';
import jwt from 'jsonwebtoken';
import { createAccessToken } from "../../../utils/generateToken";

dbConnect();

export default handler.get(async (req, res) => {
    try {
        const token = req.cookies.auth;
        if (!token) return res.status(400).json({ message: "Please Login To Get Access" });

        const result = jwt.verify(token, process.env.JWT_REFRESH_TOKEN);
        if (!result) return res.status(400).json({ message: "Token Has Been Expired" });

        const user = await User.findById(result.userId);
        if (!user) return res.status(400).json({ message: "User Does Not Exist" });

        const accessToken = createAccessToken({ id: user._id });
        res.status(200).json({ accessToken, user: {
            userId: user._id,
            myUserName: user.nama,
            myUserEmail: user.email
        }});
    } catch(err) {
        res.status(500).json({ message: "Server Error", err: err.message });
    };
})

Это мой _app.js :

 import "../styles/globals.css";
import { DataProvider } from "../utils/AuthToken";

function MyApp({ Component, pageProps }) {
    return (
        <DataProvider>
            <Component {...pageProps} />
        </DataProvider>
    );
};

export default MyApp

И это мой index.js (я хочу использовать жетон здесь):

 import React, { useContext } from 'react';
import Head from 'next/head';
import { AuthToken } from "../utils/AuthToken";

function Home() {
    const { stateAuth, dispatchAuth } = useContext(AuthToken);
    console.log(stateAuth, dispatchAuth); // When i console log it i get undefined for both of them. That's my problem is.

    return (
        <React.Fragment>
            <Head>
                <title>Try useContext and useReducer</title>
                <meta name="icon" href="/favicon.ico" />
            </Head>
        </React.Fragment>
    );
};

export default Home;

Это моя проблема: console.log в браузере становится неопределенным.

введите описание изображения здесь

Ответ №1:

useReducer Крючок возвращает кортеж, но вы разрушаете его как объект. Правильный синтаксис будет выглядеть следующим образом:

 const [stateAuth, dispatchAuth] = useReducer(reducer, initialState);

Комментарии:

1. я больше не получаю неопределенного ответа, но почему мой статус пуст. В любом случае, спасибо.

2. Кто-нибудь может мне помочь, пожалуйста? я больше не получаю неопределенность, но вместо этого я получаю пустой объект, это так расстраивает.

Метки: