TypeError: console.log is not a function in Node crud app

huangapple go评论82阅读模式
英文:

TypeError: console.log is not a function in Node crud app

问题

我正在尝试创建一个CRUD应用程序,但我收到了一个错误消息“TypeError: console.log is not a function” ,在Query.处发生了错误,位置在C:\Users\Luis Hernandez\Desktop\gaming-crud\server\app.js的第30行。

这种情况每次我点击添加按钮来将游戏添加到数据库时都会发生。

这是服务器端的代码:

//创建服务器
const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');

//使前端可以向后端发起请求
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');
            }
        });
});


//监听的端口
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 successfully');
            }).catch((err) => {
                console.log('error message' + 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;

图片链接:TypeError: console.log is not a function in Node crud app

英文:

I am trying to make a crud app but I am getting an error message "TypeError: console.log is not a function" at Query.<anonymous> (C:\Users\Luis Hernandez\Desktop\gaming-crud\server\app.js:30:25)

TypeError: console.log is not a function in Node crud app

This happens every time I click the add button to add a game to the database.

This is the server

//create server
const express = require(&#39;express&#39;)
const app = express();
const mysql = require(&#39;mysql&#39;)
const cors = require(&#39;cors&#39;)
//Make available to make request from the front end to the backend
app.use(cors());
app.use(express.json());
const db = mysql.createConnection({
user: &quot;root&quot;,
host: &quot;localhost&quot;,
password: &quot;adminsql&quot;,
database: &quot;storagedgames&quot;
})
app.post(&#39;/create&#39;, (req, res) =&gt; {
const gameName = req.body.gameName
const genre = req.body.genre
const year = req.body.year
const console = req.body.console
db.query(
&#39;INSERT INTO games (game_name, genre, year, console) VALUES (?,?,?,?)&#39;,
[gameName, genre, year, console], 
(err, result) =&gt; {
if(err){
console.log(err);
} else {
res.send(&#39;values added&#39;)
}
});
});
// port to listen
app.listen(3001, () =&gt; {
console.log(&#39;listening to port 3001&#39;)
})

This is the Client frontend

import { Link } from &#39;react-router-dom&#39;
import &#39;./Create.css&#39;
import { useState } from &#39;react&#39;;
import Axios from &#39;axios&#39;
const Create = () =&gt; {
const [gameName, setGameName] = useState(&#39;&#39;);
const [genre, setGenre] = useState(&#39;&#39;);
const [year, setYear] = useState(0);
const [console, setConsole] = useState(&#39;&#39;);
const addGame = () =&gt; {
Axios.post(&#39;http://localhost:3001/create&#39;,
{
gameName: gameName,
genre: genre,
year: year,
console: console
}).then((result) =&gt; {
console.log(&#39;added succesfully&#39;)
}).catch((err) =&gt; {
console.log(&#39;error mesagge&#39; + err)
});
}
return (
&lt;div className=&quot;create&quot;&gt;
&lt;Link to={&#39;/&#39;} className=&#39;home-button neon-button-form&#39;&gt;Home&lt;/Link&gt;
&lt;div className=&quot;create-container &quot;&gt;
&lt;h2 className=&quot;create-title headtext-h2&quot;&gt;Add a Game&lt;/h2&gt;
&lt;form className=&quot;create-form&quot;&gt;
&lt;label className=&#39;create-label headtext-label&#39;&gt;Game Name&lt;/label&gt;
&lt;input type=&quot;text&quot; className=&#39;create-input &#39; onChange={(e) =&gt; {
setGameName(e.target.value);
}} /&gt;
&lt;label className=&#39;create-label headtext-label&#39;&gt;Genre&lt;/label&gt;
&lt;input type=&quot;text&quot; className=&#39;create-input&#39; onChange={(e) =&gt; {
setGenre(e.target.value);
}} /&gt;
&lt;label className=&#39;create-label headtext-label&#39;&gt;Year&lt;/label&gt;
&lt;input type=&quot;number&quot; className=&#39;create-input&#39; onChange={(e) =&gt; {
setYear(e.target.value);
}} /&gt;
&lt;label className=&#39;create-label headtext-label&#39;&gt;Console&lt;/label&gt;
&lt;input type=&quot;text&quot; className=&#39;create-input&#39; onChange={(e) =&gt; {
setConsole(e.target.value);
}} /&gt;
&lt;button className=&#39;create-button neon-button-form&#39; onClick={()=&gt;{addGame()}}&gt;ADD&lt;/button&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
);
}
export default Create;

答案1

得分: 0

这一行的问题是

const console = req.body.console

你给 console 赋了一个不同的值,这会导致错误。当你像这样赋值给 console 时,你的控制台对象将不再具有 log() 函数。单词 console 在JavaScript中是一个保留关键字,用于记录消息的控制台对象。你可以将其重命名为 bodyConsole 或类似的名称:

const bodyConsole = req.body.console;

我在你的前端代码中看到类似的 [console, setConsole]。你也应该将其重命名为其他名称。

英文:

The problem in this line

const console = req.body.console

You assigned a different value to console, which would cause the error. When you assigned console like this, your console object won't have log() function. The word console is a reserved keyword in JavaScript, which refers to the console object used for logging messages. You can rename it to bodyConsole or something similar

const bodyConsole = req.body.console;

I saw similar [console, setConsole] in your front-end code. You should rename it to something else as well

答案2

得分: 0

你在我之前已经得到了答案。

你声明了一个名为"console"的变量,这让你感到困惑,因为在你声明的"console"名称和提供对浏览器调试控制台访问的控制台对象之间存在冲突。

因此,你必须将名称"console"更改为其他名称,例如"bodyConsole"、"consoleName"等等。

另外,你的代码可以像这样:

// 创建服务器
const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');

// 允许从前端到后端进行请求
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 consoleName = req.body.consoleName;

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


// 监听的端口
app.listen(3001, () => {
    console.log('listening to port 3001');
})

(注意:我只翻译了你的代码部分,没有其他内容。)

英文:

You've already got an answer before me.

You declared a varibale named "console" which makes you confused for that between a name of "console" you declared and the console object which provides access to the browser's debugging console.

therefore you must change the name "console" into something else like "bodyConsole", "consoleName", etc ...

addtionally, your code could be like this

//create server
const express = require(&#39;express&#39;)
const app = express();
const mysql = require(&#39;mysql&#39;)
const cors = require(&#39;cors&#39;)
//Make available to make request from the front end to the backend
app.use(cors());
app.use(express.json());
const db = mysql.createConnection({
user: &quot;root&quot;,
host: &quot;localhost&quot;,
password: &quot;adminsql&quot;,
database: &quot;storagedgames&quot;
})
app.post(&#39;/create&#39;, (req, res) =&gt; {
const gameName = req.body.gameName
const genre = req.body.genre
const year = req.body.year
const consoleName = req.body.consoleName
db.query(
&#39;INSERT INTO games (game_name, genre, year, consoleName) VALUES (?,?,?,?)&#39;,
[gameName, genre, year, consoleName], 
(err, result) =&gt; {
if(err){
console.log(err);
} else {
res.send(&#39;values added&#39;)
}
});
});
// port to listen
app.listen(3001, () =&gt; {
console.log(&#39;listening to port 3001&#39;)
})

huangapple
  • 本文由 发表于 2023年7月18日 11:44:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76709408.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定