0
287
Views¿Cómo usar los ganchos de reacción useEffect/useReducer + useContext para cambiar el valor del contexto en ts con gracia?
Como iniciador de React , estoy tratando de lograr la gestión del estado en mi aplicación React y uso useContext para compartir el estado de inicio de sesión entre los componentes.
Empecé a aprender y leí esta pregunta: >https://stackoverflow.com/questions/54738681/how-to-change-the-value-of-a-context-with-usecontext?r=SearchResults.
Intenté lo que me dijo la respuesta: use useEffect para actualizar el valor del contexto:
const initContext: GlobalContext = { login: false, } export const globalContext = React.createContext(null) function App() { return <globalContext.Provider value={useState(initContext)}> {useRoutes(router)} </globalContext.Provider> }Pero cuando uso ts para hacer lo mismo, recibo un error
El tipo '[GlobalContext, Dispatch<SetStateAction>]' no se puede asignar al tipo 'null'.
Así que probé de otra manera:
const initContext: GlobalContext = { login: false, } export const globalContext = React.createContext(useState(initContext)) function App() { return <globalContext.Provider value={useState(initContext)}> {useRoutes(router)} </globalContext.Provider> }entonces tengo otro error:
React Hook "useState" no se puede llamar en el nivel superior. Los React Hooks deben llamarse en un componente de función React o en una función React Hook personalizada.
o intenté export const globalContext = React.createContext() , y obtuve el error Expected 1 arguments, but got 0.
Entonces, mi pregunta es cómo puedo actualizar el valor del contexto en ts, ¿alguien podría ayudarme?
1 answers
Answer question0
Es probable que desee proporcionar un valor de contexto predeterminado que no sea nulo. El useState también devuelve una matriz, no un objeto con una propiedad booleana de login de sesión. Desea pasar un objeto con inicio de login como propiedad.
const initContext: GlobalContext = { login: false, } export const globalContext = React.createContext(initContext); // <-- pass initContext as default value function App() { const [login, setLogin] = useState<boolean>(false); return ( <globalContext.Provider value={{ login }}> {useRoutes(router)} </globalContext.Provider> ); }Actualizar
Si necesita actualizar el valor de login de sesión, el actualizador de estado setLogin debe pasarse en el valor Contexto.
Ejemplo:
interface IGlobalContext { login: boolean; setLogin: React.Dispatch<React.SetStateAction<boolean>>; } const initContext: IGlobalContext = { login: false, setLogin: () => {} }; const GlobalContext = React.createContext(initContext); const useGlobalContext = () => React.useContext(GlobalContext); function App() { const [login, setLogin] = useState<boolean>(false); return ( <GlobalContext.Provider value={{ login, setLogin }}> {useRoutes(router)} </GlobalContext.Provider> ); } 