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> ) } }