Typescript Unhandled Rejection (TypeError)：setAuthTokens 不是函数

Question

我在我的一个 React 项目的 Apps.jsx 文件中定义了这个：

... omitted for brevity ...
import {AuthContext, useAuth} from "./context/auth";


function Login (props: RouteComponentProps<TParams>) {
  ... omitted for brevity ...
  const {authTokens, setAuthTokens} = useAuth();

  function postLogin() {
        const url = 'http://localhost:8000/rest-auth/login/';
        const withCredentials = true;
        const method = 'post';
        const data = {"username": userName, "password": password};
        axios.request({url, withCredentials, data, method}).then(
            result => {
                // console.log('Login.postLogin.else result is :', result);
                if (result.status === 200) {
                    setAuthTokens(result.data);
                } else {
                    setIsError(true);
                }
            }); // .catch(e => {console.log('Login.postLogin.catch e is :', e); setIsError(true);});
  }

我得到一个运行时错误

Unhandled Rejection (TypeError): setAuthTokens is not a function
(anonymous function)
C:/Users/plankton/WebstormProjects/mister-neutron/src/App.tsx:93
  90 | result => {
  91 |     // console.log('Login.postLogin.else result is :', result);
  92 |     if (result.status === 200) {
> 93 |         setAuthTokens(result.data);
     | ^  94 |     } else {
  95 |         setIsError(true);
  96 |     }

useAuth 声明如下：

import { createContext, useContext } from 'react';

export const AuthContext = createContext();

export function useAuth() {
    return useContext(AuthContext);
}

Answer 1

authTokens 和 setAuthTokens 在哪里添加到AuthContext？

const AuthContext = createContext()

function useAuth() {
    return useContext(AuthContext)
}

// useAuth is an empty context, so both authTokens and setAuthTokens are undefined
const { authTokens, setAuthTokens } = useAuth()

对我来说，它看起来像一个空上下文，因此为什么 authTokens 和 setAuthTokens 是 undefined，而 undefined 不是一个函数，这就是你收到错误的原因。

试试这个：

export const AuthContext = createContext()

export const AuthState = ({ children }) => {
    const [authTokens, setAuthTokens] = useState([])

    const value = {
        authTokens,
        setAuthTokens,
    }

    return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

而不是调用useAuth，只需在您的组件中调用useContext：

const { authTokens, setAuthTokens } = useContext(AuthContext)