Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

157
Views
¿Cómo usar el valor cambiado de useContext?

Estoy usando useContext para pasar el nombre de la cuenta a todas las páginas que he creado en app.js.

contextProvider.jsx

import { createContext, useState } de 'reaccionar';

 export const LoginContext = createContext(null); const ContextProvider = ({children}) => { const [ account, setAccount ] = useState(''); return ( <LoginContext.Provider value={{ account, setAccount }}> {children} </LoginContext.Provider> ) } export default ContextProvider;

Ahora lo estoy usando en app.js para que esté disponible para todas las páginas.

aplicación.js

 import ContextProvider from './context/ContextProvider'; export default function app(){ return ( <ContextProvider> <BrowserRouter> <Routes> {/* home page where i changing the account value. My header component is wrapped inside this MainPage-component */} <Route exact path='/home-services' element={<HouseDeckHomeServicesMainPage city={city} setCity={setCity} handleData={handleData} />} /> <Route exact path='/home-services/about-us' element={<HouseDeckHomeServicesAnotherPage />} /> </Routes> </BrowserRouter> </ContextProvider> );

}

Luego recuerdo las variables en LoginContext de contextProvider.jsx para cambiarlas o establecerlas en un valor particular.

Encabezado.jsx

 export default function Header(){ const {account, setAccount} = React.useContext(LoginContext) // let I am doing in header.jsx setAccount("hello") return ( <div>{account}</div> )

}

Supongamos que estoy haciendo setAccount("Hello") en mi Header.jsx para cambiarlo. La cuenta variable de LoginContext cambió. Lo comprobé imprimiéndolo.

Ahora quiero usar el mismo valor que almacené en la cuenta en otras páginas.

No sé cómo usar ese valor.

Ahora mismo estoy haciendo

OtraPágina.jsx

 export default function AnotherPage() { const {account} = React.useContext(LoginContext) // I want to print the value of account that i changed from // null to "hello" in this page but i am getting undefined // here. console.log(account) return ( <div>{account}</div> ) }

Pero está tomando el valor predeterminado de la cuenta que es nulo , que no es lo que quiero. Quiero usar el valor modificado. Por favor ayuda.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Probablemente no tenga su Header.jsx fuera de su ContextProvider . Intente envolver todo el componente de la aplicación en lugar de solo rutas

about 4 years ago · Juan Pablo Isaza Report

0

Me he enfrentado exactamente a tu problema.

Hora de usar useMemo :

 const dataMemo = useMemo(() => { return { account, setAccount } }, [account, setAccount]) return <LoginContext.Provider value={dataMemo}> {children} </LoginContext.Provider>

No olvide import {useMemo} from 'react' en la parte superior

Espero que pueda ayudar ^^

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!