Node.js CRUD应用点击添加按钮时报TypeError: console.log is not a function

每次点击添加按钮向数据库添加游戏时，触发如下错误：

"TypeError: console.log is not a function"
错误位置：Query. (C:\Users\Luis Hernandez\Desktop\gaming-crud\server\app.js:30:25)

后端服务代码 #

//create server
const express = require('express')
const app = express();
const mysql = require('mysql')
const cors = require('cors')

//Make available to make request from the front end to the backend
app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
    user: "root",
    host: "localhost",
    password: "adminsql",
    database: "storagedgames"
})

app.post('/create', (req, res) => {
    const gameName = req.body.gameName
    const genre = req.body.genre
    const year = req.body.year
    const console = req.body.console

    db.query(
        'INSERT INTO games (game_name, genre, year, console) VALUES (?,?,?,?)',
        [gameName, genre, year, console], 
        (err, result) => {
            if(err){
                console.log(err);
            } else {
                res.send('values added')
            }
        });
});


// port to listen
app.listen(3001, () => {
    console.log('listening to port 3001')
})

前端代码 #

import { Link } from 'react-router-dom'
import './Create.css'
import { useState } from 'react';
import Axios from 'axios'


const Create = () => {

    const [gameName, setGameName] = useState('');
    const [genre, setGenre] = useState('');
    const [year, setYear] = useState(0);
    const [console, setConsole] = useState('');

    const addGame = () => {
        Axios.post('http://localhost:3001/create',
            {
                gameName: gameName,
                genre: genre,
                year: year,
                console: console
            }).then((result) => {
                console.log('added succesfully')
            }).catch((err) => {
                console.log('error mesagge' + err)
            });
    }



    return (
        <div className="create">
            <Link to={'/'} className='home-button neon-button-form'>Home</Link>
            <div className="create-container ">
                <h2 className="create-title headtext-h2">Add a Game</h2>
                <form className="create-form">
                    <label className='create-label headtext-label'>Game Name</label>
                    <input type="text" className='create-input ' onChange={(e) => {
                        setGameName(e.target.value);
                    }} />
                    <label className='create-label headtext-label'>Genre</label>
                    <input type="text" className='create-input' onChange={(e) => {
                        setGenre(e.target.value);
                    }} />
                    <label className='create-label headtext-label'>Year</label>
                    <input type="number" className='create-input' onChange={(e) => {
                        setYear(e.target.value);
                    }} />
                    <label className='create-label headtext-label'>Console</label>
                    <input type="text" className='create-input' onChange={(e) => {
                        setConsole(e.target.value);
                    }} />
                    <button className='create-button neon-button-form' onClick={()=>{addGame()}}>ADD</button>
                </form>
            </div>
        </div>
    );
}

export default Create;

错误原因 #

后端代码中定义了名为console的变量，覆盖了全局的console对象。当后续调用console.log()时，这个变量是从请求体获取的字符串值，而非全局的console函数对象，因此触发类型错误。

解决方案 #

1. 修改后端代码 #

将后端的console变量名改为consoleName（或其他不与全局对象冲突的名称），并同步修改SQL参数：

//create server
const express = require('express')
const app = express();
const mysql = require('mysql')
const cors = require('cors')

//Make available to make request from the front end to the backend
app.use(cors());
app.use(express.json());

const db = mysql.createConnection({
    user: "root",
    host: "localhost",
    password: "adminsql",
    database: "storagedgames"
})

app.post('/create', (req, res) => {
    const gameName = req.body.gameName
    const genre = req.body.genre
    const year = req.body.year
    // 重命名变量避免覆盖全局console
    const consoleName = req.body.console

    db.query(
        'INSERT INTO games (game_name, genre, year, console) VALUES (?,?,?,?)',
        [gameName, genre, year, consoleName], 
        (err, result) => {
            if(err){
                console.log(err);
            } else {
                res.send('values added')
            }
        });
});


// port to listen
app.listen(3001, () => {
    console.log('listening to port 3001')
})

2. 同步修改前端代码 #

前端的状态变量、请求字段以及状态更新函数都要对应修改，确保前后端参数一致：

import { Link } from 'react-router-dom'
import './Create.css'
import { useState } from 'react';
import Axios from 'axios'


const Create = () => {

    const [gameName, setGameName] = useState('');
    const [genre, setGenre] = useState('');
    const [year, setYear] = useState(0);
    // 重命名状态变量
    const [consoleName, setConsoleName] = useState('');

    const addGame = () => {
        Axios.post('http://localhost:3001/create',
            {
                gameName: gameName,
                genre: genre,
                year: year,
                // 同步修改请求字段名
                consoleName: consoleName
            }).then((result) => {
                console.log('添加成功')
            }).catch((err) => {
                console.log('错误信息：' + err)
            });
    }



    return (
        <div className="create">
            <Link to={'/'} className='home-button neon-button-form'>Home</Link>
            <div className="create-container ">
                <h2 className="create-title headtext-h2">Add a Game</h2>
                <form className="create-form">
                    <label className='create-label headtext-label'>Game Name</label>
                    <input type="text" className='create-input ' onChange={(e) => {
                        setGameName(e.target.value);
                    }} />
                    <label className='create-label headtext-label'>Genre</label>
                    <input type="text" className='create-input' onChange={(e) => {
                        setGenre(e.target.value);
                    }} />
                    <label className='create-label headtext-label'>Year</label>
                    <input type="number" className='create-input' onChange={(e) => {
                        setYear(e.target.value);
                    }} />
                    <label className='create-label headtext-label'>Console</label>
                    <input type="text" className='create-input' onChange={(e) => {
                        // 同步修改状态更新函数
                        setConsoleName(e.target.value);
                    }} />
                    <button className='create-button neon-button-form' onClick={()=>{addGame()}}>ADD</button>
                </form>
            </div>
        </div>
    );
}

export default Create;

内容的提问来源于stack exchange，提问作者Luis Hernandez