Next.js onClick 中的异步 function？

Question

我正在尝试从按钮 onClick 事件调用异步 function pushData()，但我不确定出了什么问题。

async function pushData() {
  alert("wee");
  console.log("pushing data");

  try {
    await query(`
    //SQL CODE
    `);

    console.log("Done");

  } catch (e) {

    console.error("wtf");
    console.log(e);

  }
}

import React from "react";

export default function Dashboard() {
  return (
    <div>
      <div>
        <h2>Dashboard</h2>
      </div>
      <button onClick={async () => await pushData()}>SQL BUTTON</button>
    </div>
  );
}

alert('wee')确实有效，但await和console.log()不做任何事情。

Answer 1

我认为您不需要在按钮的 onClick 属性中添加 async 和 await 。 只需一个简单的 pushData() function 调用即可。

Answer 2

解决方案

看起来我只是又累又笨。 onClick={pushData}删除alert()后工作正常。 出于某种原因，日志会登录到 DevTools 控制台。