Tengo dos componentes de clase React. Component1 es el padre de Component2 y tengo dos funciones (función A y B) que se pasan en accesorios de Component1 a Component2 . Anidado en Component2 , tengo una función, saveAndNotify() , que se supone que debe ejecutar functionA A y luego functionB B solo cuando la función A haya terminado de ejecutarse por completo.
Para más contexto, la función A cambia un estado en Component1 y la función B toma ese estado para realizar otras funciones.
Ver en el código de Component2 a continuación
export default class Component2 extends React.Component { static.propTypes = { functionA: PropTypes.func, functionB: PropTypes.func } render() {//some code return(//some code) } saveAndNotify = (my_arguments) => { this.props.functionA(func_a_args); this.props.functionB(func_b_args); // this needs to execute after functionA has finished } } Soy nuevo en JS y he leído sobre el uso de devoluciones de llamada, pero no he podido hacerlo secuencialmente. Especialmente porque no entiendo cómo acceder al Componente de clase de reacción con la palabra clave this cuando estoy anidando funciones mientras uso devoluciones de llamada.
Agradecería su orientación.
No necesita una devolución de llamada. Pasar 2 accesorios hará que las cosas sean más difíciles de mantener, lo mejor es pasar una función, podemos llamarla functionC que usará functionA y functionB , la functionA actualizará el estado y lo devolverá para que lo use functionB .
componente2:
export default class Component2 extends React.Component { static.propTypes = { functionC: PropTypes.func, } render() {//some code return(//some code) } saveAndNotify = (my_arguments) => { this.props.functionC(my_arguments) } }funciónC del Componente1:
functionC(my_arguments)) { const state = this.functionA() this.functionB(state) }