0
117
Viewsel gancho de reacción para el estado de múltiples componentes no se actualizó
Tengo un gancho, y 2 componentes. El componente App.js tiene una función que cambia el estado en el enlace, pero el valor no se actualiza en el componente New.js, ¿por qué? Creo que me he perdido algo, pero no puedo resolverlo.
Aplicación.js
export const useToggle = () => { const [onOff, setOnOff] = useState(false); return [onOff, () => setOnOff((prev) => !prev)]; }; export default function App() { const [onOff, setOnOff] = useToggle(); return ( <div className="App"> <h1>{onOff.toString()}</h1> <button onClick={setOnOff}>toggle</button> </div> ); }Nuevo.js
import { useToggle } from "./App.js"; export default function New() { const [onOff] = useToggle(); return ( <div className="App"> <hr /> <h1>NEW:</h1> <pre>{onOff.toString()}</pre> </div> ); }1 answers
Answer question0
Cada gancho useToggle es su propia entidad con su propio estado. El useToggle que está alternando en App no es el mismo useToggle que se procesa/usa en New .
Esto significa que se alternan independientemente de cualquier otro enlace y estado. No comparten "estado".
Si desea crear un gancho useToggle que tenga un estado compartido, le sugiero que lo implemente a través de un contexto React y el gancho useContext para que cada gancho useToggle pueda alternar el mismo estado compartido que se encuentra en el contexto.
Actualizar
Gancho de useToggle de uso global.
alternar contexto.js
import { createContext, useContext, useState } from 'react'; export const ToggleContext = createContext([false, () => {}]); const ToggleProvider = ({ children }) => { const [onOff, setOnOff] = useState(false); const toggle = () => setOnOff(t => !t); return ( <ToggleContext.Provider value={[onOff, toggle]}> {children} </ToggleContext.Provider> ); } export const useToggle = () => useContext(ToggleContext); export default ToggleProvider;índice - proporcionar el contexto
... import ToggleProvider from "./toggle.context"; const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <ToggleProvider> <App /> <New /> </ToggleProvider> </StrictMode>, rootElement );aplicación
import "./styles.css"; import { useToggle } from "./toggle.context"; export default function App() { const [onOff, setOnOff] = useToggle(); return ( <div className="App"> <h1>{onOff.toString()}</h1> <button onClick={setOnOff}>toggle</button> </div> ); }Nuevo
import { useToggle } from "./toggle.context"; export default function New() { const [onOff] = useToggle(); return ( <div className="App"> <hr /> <h1>NEW:</h1> <pre>{onOff.toString()}</pre> </div> ); } 
Tenga en cuenta que lo único que cambió en los componentes App y New fue la importación, donde se define el gancho useToggle .