Next.js 错误：无法读取未定义的属性（读取“调用”），try/catch 不起作用 onClick？

Question

var mysql = require("mysql");
import React from "react";

export async function mySqlQuery(myQuery) {
  try {
    console.log("Running query...");

    var connection = mysql.createConnection({
      host: process.env.MYSQL_HOST,
      user: process.env.MYSQL_USERNAME,
      password: process.env.MYSQL_PASSWORD,
      database: process.env.MYSQL_DATABASE,
    });

    connection.connect();

    connection.query(myQuery, function (error, results) {
      if (error) throw error;
      const output = results[0].solution;
      console.log(output);
    });

    connection.end();
  } catch (e) {
    console.error(e.message); // or "throw Error(e.message)", this shows it directly on top of the webpage
  }
}

我用来调用 function 的按钮（没有() => Next.js 认为它是一个对象）

<button onClick={() => mySqlQuery("SELECT 1 + 190 / 2 AS solution;")}> SQL PUSH </button>

我也试过这个

<button onClick={async () => await mySqlQuery("SELECT 1 + 190 / 2 AS solution;") } > SQL PUSH </button>

我收到以下错误： Uncaught (in promise) Error: Cannot read properties of undefined (reading 'call')

这是 DevTools 控制台中的错误：

这是 Next.js 中的错误，当我使用throw Error()时。

Answer 1

try块内的代码出错，您会看到在catch块中捕获/抛出错误。

mysql是 Node.js package，不能在浏览器的客户端使用。 您必须将逻辑移动到后端或 API 路由，然后在客户端发出请求。