Estoy siguiendo este tutorial y estoy a la altura de la parte sobre la implementación de un proveedor de AuthContext personalizado. Aquí está el código sugerido:
const AuthProvider = ({ children }) => { const [token, setToken] = React.useState(null); const handleLogin = async () => { const token = await fakeAuth(); setToken(token); }; const handleLogout = () => { setToken(null); }; const value = { token, onLogin: handleLogin, onLogout: handleLogout, }; return ( <AuthContext.Provider value={value}> // AuthContext defined right above component; initialised as an empty object. {children} </AuthContext.Provider> ); }; Por lo que puedo decir, eso está absolutamente bien. Pero cuando intento agregarlo a mi código (literalmente, copiarlo y pegarlo), la declaración de devolución arroja 9 errores. No se puede encontrar el espacio de nombres Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365) Cannot find namespace 'AuthContext'.ts(2503) '>' expected.ts(1005)
Incluso si solo intento devolver un div , Cannot find name 'div'.ts(2304) .
¿Qué me impide poder devolver elementos en mi declaración de devolución?
EDITAR: Actualizar para incluir mi código completo.
import React, { createContext, ReactNode, useState } from "react"; type AuthContextType = { token: string | undefined; }; export const AuthContext = createContext<AuthContextType>( {} as AuthContextType ); const fakeAuth = () => new Promise((resolve: (arg0: string) => void) => { setTimeout(() => resolve("2342f2f1d131rf12"), 250); }); export const AuthProvider = ({ children }: {children: ReactNode}) => { const [token, setToken] = useState<string | undefined>(); const handleLogin = async () => { const token = await fakeAuth(); setToken(token); }; const handleLogout = () => { setToken(undefined); }; const value = { token, onLogin: handleLogin, onLogout: handleLogout, }; return ( <AuthContext.Provider value={value}> {children} </AuthContext.Provider> ); };En el ejemplo que compartió, el contexto se crea así antes de crear el proveedor
const AuthContext = React.createContext(null);Si intenta algo como a continuación?
import React from "react"; const AuthContext = React.createContext(null); const AuthProvider = ({ children }) => { const [token, setToken] = React.useState(null); const handleLogin = async () => { const token = await fakeAuth(); setToken(token); }; const handleLogout = () => { setToken(null); }; const value = { token, onLogin: handleLogin, onLogout: handleLogout, }; return ( <AuthContext.Provider value={value}> {children} </AuthContext.Provider> ); };Revisa el nombre del archivo, en mi caso tenia extensión .ts y se solucionó cambiando a .tsx
import React, { useState, useEffect, createContext, ReactNode, Context } from 'react'; export type AuthContextType = { user?: boolean; isLoading?: boolean; } export const initialState: AuthContextType = { user: false, isLoading: true, }; export interface AuthProviderProps { children?: ReactNode } export const AuthContext: Context<AuthContextType> = createContext<AuthContextType>(initialState); const AuthCookieProvider: React.FC<AuthProviderProps> = ({ children }: AuthProviderProps): JSX.Element => { const [user, setUser] = useState<AuthContextType>(initialState); useEffect(() => { checkUserLogin(setUser); }, []); return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>; }; export default AuthCookieProvider;