reactjs - cum să folosești useContext în react/nextjs cu typescript

Sunt nou în lumea TypeScript și creez un nou proiect în Next.js folosind TypeScript și vreau să adaug funcționalitate de autentificare cu acesta, așa că folosesc createContext. Anterior am folosit JavaScript, unde nu trebuie să definim o valoare implicită la crearea contextului. Acestea sunt câteva erori pe care le primesc în VSCode; vă rog, dacă cineva mă poate ghida cu codul, ar fi grozav.

AuthContext.tsx complet

    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

loginul meu.tsx

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

const Login = () => {



  const { login, error } = useContext(AuthContext)

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

Iar pentru variabila utilizator, am nevoie doar de acest obiect

{
   username:"ansh3453",
   id:43
}

Răspuns #1

ei bine, ai nevoie de un tip pe care îl poți pune pe tipurile tale, cred că aici trebuie să adaugi obiectul tău de eroare și utilizator:

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

după ce trebuie să creezi contextul, poți adăuga și aici utilizatorul și eroarea ta, înainte de a crea contextul:

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

const ConfigContext = createContext(initialState);

acum pentru funcția ta

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

Presupun că acesta este un exemplu nu ușor de scris, dar ar trebui să adaugi eroarea și utilizatorul la tip

Răspunsul #2

Eroarea este cu adevărat auto-descriptivă:

Expected 1 arguments, but got 0.

An argument for 'defaultValue' was not provided

createContext necesită un argument care setează valoarea implicită a Contextului dacă este importat vreodată în afara limitelor unui Context Provider.

Aruncă o privire asupra documentației React pentru createContext: https://reactjs.org/docs/context.html#reactcreatecontext