0
205
ViewsEl contexto no se está comportando correctamente en reaccionar. imprimiendo valores predeterminados
Creé debajo del contexto en react .
NameContext.tsx
import { createContext } from 'react'; export const AppContext = createContext("NA"); Usé este contexto dentro de mi Layout.tsx . Estoy usando el diseño interior porque tengo algo de lógica comercial para ejecutar. en función de ese valor isActive se establecerá.
const [isActive,setIsActive]=useState("NO"); return( <AppContext.Provider value={isActive}> <User/> </AppContext.Provider> ) ahora en User.tsx estoy accediendo a esta pestaña.
import { useContext } from "react"; import { Link } from "react-router-dom" import { AppContext } from "../context/NameContext"; const User = ()=>{ const context = useContext(AppContext); let isActive:any; if(context=="YES") isActive=true; else isActive=false; console.log("context is:"+context); console.log(isActive); return( <> <span> {isActive && <Link to="user" > List of Users</Link> } </span> </> ) } export default User;en solo una actualización de página, entrega valores muchas veces y la mayoría de las veces valores predeterminados. No quiero valores predeterminados sino el valor que configuré en el proveedor. ¿Cómo puedo evitar este comportamiento anormal?
·
Juan Pablo Isaza
1 answers
Answer question0
cree un envoltorio y luego coloque el Diseño dentro del componente Envoltorio, el valor estará disponible globalmente.
//Wrapper import React, { useState } from "react"; export const Context = React.createContext(); const Wrapper = (props) => { const [active, setActive] = useState('NO'); function changeValue(value) { setActive(value) } function getCurrent() { return active; } return ( <Context.Provider value={{ active, changeValue, getCurrent }}> {props.children} </Context.Provider> ); }; export default Wrapper; // index.tsx import Wrapper from './path/Wrapper' <Wrapper> <App /> </Wrapper> //Layout must be inside App! //Layout.tsx import { Context } from "../../layout/Wrapper"; export default function Layout(){ const context = useContext(Context); console.log(context.getCurrent()) // NO context.changeValue('YES') console.log(context.getCurrent()) // YES }
·
Juan Pablo Isaza
Report
Answer question