英文:
TypeError: console.log is not a function in Node crud app
问题
我正在尝试创建一个CRUD应用程序,但我收到了一个错误消息“TypeError: console.log is not a function” ,在Query.
这种情况每次我点击添加按钮来将游戏添加到数据库时都会发生。
这是服务器端的代码:
//创建服务器
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;
英文:
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)
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('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')
})
This is the Client frontend
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;
答案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('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 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')
}
});
});
// port to listen
app.listen(3001, () => {
console.log('listening to port 3001')
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论