Mantengo un proyecto React basado en clases heredadas e introduzco componentes funcionales a medida que avanzo. Una de las soluciones para tratar de evitar una reescritura total es permitir que los componentes secundarios se comuniquen con los padres a través de un modelo de "registro" en el que el hijo se registra con el padre y el padre llama a las funciones secundarias.
Mi problema es que el estado secundario parece volverse inaccesible para el padre (llamar a la función 'getChildValue()' siempre devuelve el estado secundario inicial).
Supongo que en un mundo basado en clases, simplemente vincularía (esto) a la función y funcionaría.
Alguien puede ayudar:
Un bolígrafo que ilustra el problema está aquí:
https://codepen.io/seven360/pen/NWaEjmW
Al hacer clic en 'Inc Value In Child' se incrementa el estado, pero 'Get Value From Child' siempre devuelve 1 (el estado inicial)
const ChildElement = (props) => { const [ value, setValue ] = useState ( 1 ) ; const getValue = () => { console.log ( "getValue Called"); return value ; } useEffect(() => { props.register ( { getValue: getValue }) ; }, [] ) ; const incChildValue = () => { setValue ((value) => value + 1); } return <div> <h1>Child Component Value Currently = {value}</h1> <button type='button' onClick={incChildValue} >Inc Value In Child</button> </div> }Y este es el contenedor principal 'heredado':
class Container extends React.Component { constructor ( props ) { super(props) ; this.register = this.register.bind(this) ; this.getChildValue = this.getChildValue.bind(this); this.childRef = React.createRef(); } register ( childFuncs ) { console.log ( "Registered"); console.log ( childFuncs ); this.childRef.current = childFuncs ; } getChildValue () { const childValue = this.childRef.current.getValue() ; alert ( "This Should not be 1 - " + childValue ); } render() { return ( <div> <div>Container</div> <ChildElement register={this.register} /> <button type='button' onClick={this.getChildValue} >Get Value From Child</button> </div> ) } }El problema es que, en su componente secundario, useEffect no tiene dependencias, por lo que la función de registro solo se ejecutará en el montaje. Necesita ejecutar cada vez que se cambia el valor. Entonces agregue el valor como una dependencia.
useEffect(() => { props.register({ getValue: () => {return value;} }); }, [value]);