Tengo un problema con una aplicación en la que estoy trabajando. Tengo un botón que activa 2 funciones. Uno de ellos es un setState que cambia la dirección de un gráfico dagre y el otro es una función que proporciona React-flow-renderer y ajusta (centra) la instancia del gráfico en la pantalla. Creo que debe hacerse de forma asíncrona, ya que la segunda función se ejecuta solo si hago doble clic en el botón o si configuro un setTimeOut para que se ejecute después de, por ejemplo, 3 segundos. Así que esto funciona:
<Button onClick={() => { onChangeTreeLayout('LR'); setTimeout(() => { reactFlowInstance.fitView(); }, 5000); }} >Esto funciona después de presionar el botón por segunda vez:
<Button onClick={() => { onChangeTreeLayout('LR'); reactFlowInstance.fitView(); }} > Así que estaba pensando en hacer algo como lo siguiente, para que la segunda función se ejecute tan pronto como se complete la primera: Pero devuelve TypeError: undefined is not an object (evaluating 'a("LR").then')
<Button onClick={() => { onChangeTreeLayout('LR').then(() => reactFlowInstance.fitView()); }} > ¿Puedo obtener ayuda para implementar el último y resolver el error o cualquier otra forma de esperar a que se ejecute onChangeTreeLayout y luego se reactFlowInstance.fitView() tan pronto como se complete el primero?
Intenta usar async/await:
<Button onClick={async () => { await onChangeTreeLayout('LR'); reactFlowInstance.fitView(); }}