如何使用 typescript 在 react/nextjs 中使用上下文

Question

我是 typescript 世界的新手，我正在使用 typescript 在 nextjs 中创建一个新项目，并想使用它添加身份验证功能，所以我使用 createContext 我以前使用过 ZDE9B9ED78D7E2E1DCEEFFEE780E2F919，而在我们不需要定义默认值的地方创建语境。 这些是我在 vscode 中遇到的一些错误，如果有人用代码指导我，那就太好了。

完整的 AuthContext.tsx

    import { createContext, useEffect, useState } from "react";

import React from 'react'
import { setCookie } from 'cookies-next';
import { useRouter } from "next/router";


const AuthContext = createContext();


export function AuthProvider({ children }: any) {
  const [user, setUser] = useState(null)
  const [error, setError] = useState(null)

  const router = useRouter()

  useEffect(() => {
    checkUserLoggedIn();
  }, []);

  const logout = async () => {

  }

  const login = async (vals: object) => {

  }

  const register = async (vals: object) => {
 
  }

  const checkUserLoggedIn = async () => {

  }

  return (
    <AuthContext.Provider value={{ user, error, register, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContext

我的登录名.tsx

import AuthContext from '../context/AuthContext'
import { useContext, useEffect } from 'react';

const Login = () => {



  const { login, error } = useContext(AuthContext)

  useEffect(() => error && toast.error(error))

而对于用户变量，我只需要这个 object

{
   username:"ansh3453",
   id:43
}

Answer 1

那么你需要一个类型，你可以把它放在你的类型上，我认为你需要在这里添加你的错误和用户 object：

export type CustomizationProps = {
    user: any, 
    error: any,
    logout: () => void;
    login: (vals: object) => void;
    register: (vals: object) => void;
    checkUserLoggedIn : () => void;
};

在需要创建上下文之后，您也可以在此处添加您的用户和错误，然后再创建上下文：

const initialState: CustomizationProps = {
    user: any, 
    error: any,
    logout: () => {},
    login: () => {},
    register: () => {},
    checkUserLoggedIn : () => {}
}; 

const ConfigContext = createContext(initialState);

现在为您的 function

type ConfigProviderProps = {
   children: React.ReactNode;
};

export function AuthProvider({ children }: ConfigProviderProps) {
  const [user, setUser] = useState(null)
  const [error, setError] = useState(null)

  const router = useRouter()

  useEffect(() => {
    checkUserLoggedIn();
  }, []);

  const logout = async () => {

  }

  const login = async (vals: object) => {

  }

  const register = async (vals: object) => {
 
  }

  const checkUserLoggedIn = async () => {

  }

  return (
    <AuthContext.Provider value={{ user, error, register, login, logout }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContext

我想这是一个不容易编写的示例，但是您应该将错误和用户添加到类型中

Answer 2

该错误实际上是自描述的：

Expected 1 arguments, but got 0.

An argument for 'defaultValue' was not provided

createContext需要一个参数来设置 Context 的默认值，如果它曾经导入到 Context Provider 的边界之外。

查看createContext的 React 文档： https://reactjs.org/docs/context.html#reactcreatecontext