Tengo un componente ReactJS simple, que utiliza algún estado, myValue , que se almacena en un contexto.
En esta página myValue en HTML y también en un botón.
Quiero que el valor original de myValue se represente en el HTML, pero quiero establecer el valor en el contexto en 0.
El botón siempre debe mostrar el valor contenido en el contexto, que debe representarse como 0 en la página.
export function MyComponent() { const { myValue, setMyValue } = useContext(myValueContext); useClearData(); // Should be called somewhere to reset myValue to 0 return ( <React.Fragment> <MyValueButton /> {/* Should display myValue as 0 */} <main className="App"> <div> My value is the original {myValue} which should be non-zero! </div> </main> </React.Fragment> ); }¿Cómo estructuro este código para que el botón se vuelva a mostrar cuando cambia el contexto, pero el HTML no?
Entonces, para responder a mi propia pregunta, esto necesita el gancho useRef :
export function MyComponent() { const { myValue, setMyValue } = useContext(myValueContext); myValueRef = useRef(myvalue); useClearData(); // Should be called somewhere to reset myValue to 0 return ( <React.Fragment> <MyValueButton /> {/* Should display myValue as 0 */} <main className="App"> <div> My value is the original {myValueRef.current.toString()} which should be non-zero! </div> </main> </React.Fragment> ); }