异步JS：Button需要按两次才能执行onClick()。 onClick() 触发 2 个函数，但只有一个在第一次单击时执行

Question

我有一个关于我正在处理的应用程序的问题。我有一个触发 2 功能的按钮。其中一个是 setState ，它改变了 dagre 图的方向，另一个是 React-flow-renderer 提供并适合（居中）屏幕中的图形实例的函数。我认为它需要异步完成，因为第二个函数只有在我双击按钮或者我设置 setTimeOut 在 f.ex., 3 秒后执行时才会执行。所以这有效：

<Button
  onClick={() => {
    onChangeTreeLayout('LR');
    setTimeout(() => {
      reactFlowInstance.fitView();
    }, 5000);
  }}
>

这在第二次按下按钮后起作用：

<Button
  onClick={() => {
    onChangeTreeLayout('LR');
    reactFlowInstance.fitView();
  }}
>

所以我想做类似下面的事情，这样第二个函数就会在第一个函数完成后立即执行：但是它 returns TypeError: undefined is not an object (evaluating 'a("LR").then')

<Button
  onClick={() => {
    onChangeTreeLayout('LR').then(() => reactFlowInstance.fitView());
  }}
>

我可以得到一些帮助来实现最后一个并解决错误或任何其他等待 onChangeTreeLayout 被执行然后 reactFlowInstance.fitView() 被触发的方法吗第一个完成了吗？

Answer 1

尝试使用 async/await:

<Button
  onClick={async () => {
    await onChangeTreeLayout('LR');
    reactFlowInstance.fitView();
}}

异步JS：Button需要按两次才能执行onClick()。 onClick() 触发 2 个函数，但只有一个在第一次单击时执行

Asynchronous JS: Button needs to be pressed twice to execute onClick(). The onClick() triggers 2 functions but only one is executed on 1st click

javascript

asynchronous

reactjs

dagre

react-flow