reactjs - 如何使用上下文是一个不是组件的反应类

Question

在我的应用程序中，我有一个与服务器一起使用的类（发送和接收数据）。我需要向这个类传递一个令牌。我有一个包含它的上下文。但是我找不到将它发送到我的班级的方法。

这是一个上下文：

import React, { useState, createContext } from 'react';
import loginService from '../service/LoginService';

export const AuthContext = createContext();

const AuthContextProvider = (props) => {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [userToken, setUserToken] = useState("");
    const [userId, setUserId] = useState("");
    const [userName, setUserName] = useState("");

    const toggleAuth = () => {
        if (!isAuthenticated) {
            setUserToken(loginService.getUserToken());
            setUserId(loginService.getUserId());
            setUserName(loginService.getUserName());
            console.log("The user id: " + userId);
            setIsAuthenticated(true);
        } else {
            setUserToken(null);
            setUserId(null);
            setUserName(null);
            setIsAuthenticated(false);
        }

    }

    return (
        <AuthContext.Provider value={{ isAuthenticated, toggleAuth }}>
            {props.children}
        </AuthContext.Provider>
    );
}

export default AuthContextProvider;

这就是我尝试在课堂上使用上下文的方式：

class MediaService {
    static contextType = AuthContext;
    galleryItems = [];

    constructor() {
        this.galleryItems = [];
    }

    addItem = (item) => {
        axios.post("http://localhost:8080/image", item, {
            headers: {
                "Authorization": `Barier ${**this.context.userToken**}`
            }
        })
            .then((response) => {
                item.id = response.data.id;
                this.galleryItems.push(item);
            }).catch((err) => {
                console.error(err);
            });
    }
}

但是我收到一个错误，即 this.context 未定义。如何更改我的代码来克服这个问题？

我知道 useContext，但是当我尝试切换到该函数时，我得到另一个错误，即 useContext 只能在组件中使用，但这不是组件。

而且我想将数据库逻辑保存在一个单独的类中，而不是任何组件中。

标签： reactjsuse-context