Necesito ayuda para actualizar un usuario en varias partes de mi aplicación de reacción. Pude crear con éxito un contexto y acceder a él globalmente, pero cada vez que intento actualizar el estado, se rompe o usa el estado predeterminado Tengo problemas para actualizar el estado, el código va aquí
Archivo de contexto
import { createContext } from "react"; const user = { Fullname: "Ade Johnson", username: "Jonny", phone: "+234 0987655", email: "jonny@gmail.com", mode: "light", isLoggedIn: false, }; export const UserContext = createContext(user);Aplicación.js
import { UserContext } from "../User"; const providerValue = useMemo(() => ({ user, setUser }), [user, setUser]); const { user, setUser } = useContext(UserContext); <UserContext.Provider value={providerValue}> {Children} </UserContext.Provider>3.Iniciar sesión.js
function Login() { const [username, setUsername] = useState(""); const [pass, setPass] = useState(""); const { user, setUser } = useContext(UserContext); function proceed(url) { let newArr = {...user}; newArr[0].isLoggedIn = true; newArr[0].Fullname = "Toluwalope"; newArr[0].username = "Toolz"; newArr[0].email = "Tolu@gmail.com"; setUser(newArr); console.log(user); window.location.replace(url); }Tablero.js
import React, { useContext, useEffect } from "react"; import { UserContext } from "../User"; function Dashboard() { const { user } = useContext(UserContext); return ( <div className="container-fluid" id="main"> <h5 className="mt-5 pt-5">Welcome {user[0].username},</h5> </div> ); }; export default Dashboard;En este punto, cuando se carga el tablero, usa el estado predeterminado.
Estás mezclando tus estructuras de datos. Debe desestructurar desde useContext con una matriz (no un objeto), y su objeto user debe ser un objeto (no una matriz):
const [user, setUser] = useContext(UserContext);Y
const newUser = { ...user, isLoggedIn: true }; // etcContexto.jsx
import React from 'react' export const Store = React.createContext({}) export default function StoreProvider({children}){ const [user, setUser] = React.useState({...you user properties}) return( <Store.Provider value={{ user, setUser }} > {children} </Store.Provider> ) }Aplicación.jsx
import StoreProvider from 'path/to/store_provider.jsx' export default function App(){ return ( <StoreProvider> //here you add your components that you want // to have access to the store or your router </StoreProvider> ) }Iniciar sesión.jsx
import React from 'react' import {Store} from 'path/to/store' export default function Login(){ //now you can update user successfully like this // setUser(prev => {...prev, newKey: newValue}) const {setUser} = React.useContext(Store) return ( //your jsx here ) }Tablero.jsx
import React from 'react' import {Store} from 'path/to/store' export default function Dashboard(){ //now you can read user successfully like so // user.FirstName etc. //updating user from other components will update this view automatically const {user} = React.useContext(Store) return ( //your jsx here ) }Su código en general no se compila de la forma en que nos lo muestra. Pero incluso si omitiste algunas partes, hay dos fallas.
Además, useMemo() no es necesario. Consulte los documentos para conocer los casos de uso más adecuados de useMemo().