如何设置条件 onClick 行为以响应异步函数

Question

我有一个发送异步请求的按钮，但我只想在变量为 false 时发送此请求。我已尝试遵循此但我不断收到错误

这是原来的onClick

            onClick={async () => {
              const CompleteCA = async () => {
                try {
                  if (!statusFinal) {
                    await sendTransaction({
                      },
                    });
                  }

                  await updateCA({
                    variables: {
                      id: CA,
                    },
                  });

                  history.push('/');
                } catch (error) {
                  logError(error);
                }
              };
              CompleteCA();
            }}

添加条件后：

 onClick={async () => {
                  testFlag ? alert("flag is true") :
                  const CompleteCA = async () => {
                    try {
                    ...... rest of function
                    }
                  };
                  CompleteCA();
                }}

由于无法在 onClick 中声明 const，因此我将所有行都加了下划线，但我不确定如何将其移出到另一个函数并保持异步完整

Answer 1

我建议单独定义异步函数并将条件逻辑放在那里。然后从 onClick 调用它，例如 <button onClick={async () => { await asyncFunc(); } }>Click</button>

Here 是一个简单的 CodeSandbox 示例。

如何设置条件 onClick 行为以响应异步函数

How to set conditional onClick behaviour in react with async function

javascript

asynchronous

onclick

typescript

reactjs