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 路由，然后在客戶端發出請求。