no se donde esta el problema pero cuando traté de iniciar sesión, no quería navegar a las siguientes páginas y se atascó en el inicio de sesión modal. por favor dígame qué está mal con mi código?
let navigate = useNavigate(); const dispatch = useContext(UserContext); const state = useContext(UserContext); // console.log(state); const [form, setForm] = useState({ email: "", password: "", }); const { email, password } = form; const handleChange = (e) => { setForm({ ...form, [e.target.name]: e.target.value, }); }; const handleSubmitLog = async (e) => { try { e.preventDefault(); const config = { headers: { "Content-type": "application/json", }, }; const body = JSON.stringify(form); const response = await API.post("/login", body, config); console.log(response.data); if (response?.status == 200) { dispatch({ type: "LOGIN_SUCCESS", payload: response.data.data, }); if (response.data.data.status == "admin") { navigate('/admin') } else { navigate('/userid') } } } catch (error) { console.log(error); } }aquí está la respuesta en la consola, no sé por qué este despacho no puede funcionar bien
{ "status": "Success", "data": { "users": { "name": "mr.x", "email": "mr.x@mail.com", "token": "asfsa" } } } TypeError: dispatch is not a function at handleSubmitLog (header.js:59:1)y aquí está el cuerpo del archivo userContext. por favor revíselo y dígame si mi código es incorrecto
export const UserContext = createContext(); const initialState = { isLogin: false, user: {}, }; const reducer = (state, action) => { const { type, payload } = action; switch (type) { case "USER_SUCCESS": case "LOGIN_SUCCESS": localStorage.setItem("token", payload.token) return { isLogin: true, user: payload, }; case "AUTH_ERROR": case "LOGOUT": localStorage.removeItem("token") return { isLogin: false, user: {}, }; default: throw new Error(); } }; export const UserContextProvider = ({ children }) => { const [state, dispatch] = useReducer(reducer, initialState); return ( <UserContext.Provider value={[state, dispatch]}> {children} </UserContext.Provider> ); };El valor de UserContext es una matriz [state, dispatch] :
<UserContext.Provider value={[state, dispatch]}> {children} </UserContext.Provider>Pero el componente no accede correctamente al valor de contexto:
const dispatch = useContext(UserContext); const state = useContext(UserContext); Aquí, tanto dispatch como state tienen el mismo valor de contexto de [state, dispatch] .
Solo necesita un useContext(UserContext) , cualquiera de los siguientes:
Guarde el valor de contexto completo y use la indexación de matrices:
const userContext = useContext(UserContext); ... // userContext[0]; state object/value // userContext[1]; dispatch function ... userContext[1]({ type: "LOGIN_SUCCESS", payload: response.data.data, }); Guarde los valores de state y dispatch directamente usando la asignación de desestructuración de matriz:
const [state, dispatch] = useContext(UserContext); ... dispatch({ type: "LOGIN_SUCCESS", payload: response.data.data, });Prueba esto:
const { state, dispatch } = useContext(AppContext)