Para un sitio web en el que estoy trabajando, he creado un componente con casillas de verificación que desencadena un cambio de estado en un componente principal. He comprobado en la consola a través del componente secundario que el estado ha cambiado, pero quiero que el componente principal también "observe" el cambio. Probé useEffect y componentDidUpdate, pero ninguno de los dos se activa por el cambio de estado.
Para aclarar, la estructura se ve así:
Padre: Tiene el estado inicial Hijo: Obtiene acceso al estado a través del padre y cambia de estado
En una actualización de página, el padre nota el cambio de estado, pero quiero esto sin tener que actualizar la página.
Espero que esto tenga sentido, gracias de antemano :)
¿Es esto lo que estás buscando?
import React, { useState } from "react"; const Parent = () => { const [someState, setSomeState] = useState("Initial Some State"); const onChangeSomeState = (newSomeState) => { setSomeState(newSomeState); }; return ( <div> Parent: <Child someState={someState} onChangeSomeState={onChangeSomeState} ></Child> </div> ); }; const Child = ({ someState, onChangeSomeState }) => { const handleChangeStateClick = () => { onChangeSomeState("New Some State from Child"); }; return ( <div> Child:{someState} <input type="button" onClick={handleChangeStateClick} value="Change state from Child" ></input> </div> ); }; export default Parent;Si entendí su problema correctamente, puede pasar una función de devolución de llamada al componente secundario. De esa manera, recibirá valor de la devolución de llamada en su componente principal como este:
const ParentComponent = () => { const [someState, setSomeState] = useState() const childCallback = (value) => { setSomeState(value) } return <ChildComponent callback={childCallback} /> }La naturaleza de reaccionar significa que los datos fluyen por el árbol dom. Esto es posible gracias a los accesorios.
Cuando los accesorios cambian, reacciona y eso hace que el destinatario de los accesorios vuelva a renderizar. Sin embargo, como ha descubierto, esta es una relación unidireccional, solo de padres a hijos.
La belleza de javascript es que puede tratar funciones como cadenas o números y pasarlos. En este caso como accesorios.
Entonces, mientras que el niño no puede 'decirle' al padre que algo ha cambiado directamente, el padre puede pasar una función que el niño puede usar para dar a conocer el cambio.
Este patrón de transmitir un valor de un padre y una función de "controlador" que el niño puede usar para notificar al padre es extremadamente común y es bueno para entenderlo.
Tome una entrada de texto estándar como ejemplo.
const Parent = () => { // This is our parent's state const [inputValue, setInputValue] = useState('hello world'); // This is the handler we will give to the child to let us know of changes const handleInputChange = (e) => setInputValue(e.target.value) return <input value={inputValue} onChange={handleInputChange} /> }En el ejemplo anterior, el elemento secundario (la entrada), cuando cambie, llamará a la función que se le proporcionó y eso actualizará el estado del elemento principal. Cualquier actualización de estado en un componente de reacción (al igual que un cambio de prop) provocará una nueva representación y, por lo tanto, una actualización visual.
Utilicé un <input> incorporado en cualquier niño que usted mismo escriba, solo necesita aceptar una 'función de controlador' que llama dentro de su hijo cuando quiere que el padre sepa que algo sucedió.