Tengo un componente React simple llamado Child que incrementa su conteo cuando se hace clic. Además, se guarda un estado externo que se actualiza cuando se Child el componente secundario.
const Child = ({ onChange }) => { const [count, setCount] = useState(0); return ( <div> <h1 onClick={() => { setCount(prev => prev + 1); onChange(1); }} > Child count = {count} </h1> </div> ); }; const App = () => { const [count, setCount] = useState(0); return ( <div className="App"> <h1> Parent Count = {count} </h1> <Child onChange={(i) => setCount(count + i)} /> </div> ); } El código anterior funciona como se esperaba. Sin embargo, cuando uso la API de contexto para administrar el estado externo, el conteo interno del componente Child permanece en 0 .
const App = () => { const [count, setCount] = useState(0); const AppContext = React.createContext(); return ( <div className="App"> <AppContext.Provider value={{ state: count, setState: setCount }}> <> <AppContext.Consumer> {({ state }) => <h1> Parent Count = {state} </h1>} </AppContext.Consumer> <AppContext.Consumer> {({ state, setState }) => ( <Child onChange={(i) => setState(state + i)} /> )} </AppContext.Consumer> </> </AppContext.Provider> </div> ); };Ejemplo de CodeSandbox .
¿Por qué el estado interno del elemento dentro de AppContext.Provider siempre se restablece a su estado inicial?
Primero, la creación de un contexto debe estar fuera de un Componente, lo que significa esta línea:
const AppContext = React.createContext() debe estar fuera de la App . En segundo lugar, una configuración de contexto puede ser más simple, como se muestra a continuación (separé cada componente en su propio archivo, por lo que se parece a los casos de uso comunes), y trabajar CodeSandbox bifurcado aquí .
aplicación:
import { useState, createContext } from "react"; import Child from "./Child"; export const AppContext = createContext(); const App = () => { const [count, setCount] = useState(0); return ( <div className="App"> <h1> Parent Count = {count} </h1> <AppContext.Provider value={{ state: count, setState: setCount }}> <Child /> </AppContext.Provider> </div> ); }; export default App;Niño:
import { useContext, useState } from "react"; import { AppContext } from "./App"; const Child = () => { const { state, setState } = useContext(AppContext); const [count, setCount] = useState(0); return ( <div> <h1 onClick={() => { setCount((prev) => prev + 1); setState(state + 1); }} > Child count = {count} </h1> </div> ); }; export default Child;