Node.jsとMySQLを使ってデータの追加をしたい

node.jsとMySQLを使って、INSERT（追加）したいと考えています。
Progateの記述を元にコードを書いてみましたがなぜかプロパティがないとエラーが出てしまいます。
EJSにもnode.jsにもproductNameというものをしっかり用意しています。
何か変数が足りなかったりするようでしたら教えていただきたいです。

app.js

app.js
1const express = require('express');
2const mysql = require('mysql');
3const app = express();
4
5const connection = mysql.createConnection({
6  host: 'localhost',
7  user: 'root',
8  password: '',
9  database: 'node-test'
10});
11
12connection.connect((err) => {
13  if (err) {
14    console.log('error connecting: ' + err.stack);
15    return;
16  }
17  console.log('success');
18});
19
20app.get('/', (req, res) => {
21  connection.query(
22    'SELECT * FROM products',
23    (error, results) => {
24      res.render('hello.ejs',{products: results});
25    }
26  );
27});
28
29app.post('/', (req, res) => {
30  // データベースに追加する処理を書いてください
31  connection.query(
32    'INSERT INTO products(name) VALUES(?)',
33    [req.body.productName],
34    (error, results) => {    
35      (error, results) => {
36        res.render('hello.ejs', {products: results});
37      }
38    }
39  );
40});
41
42
43
44app.listen(3000);

hello.ejs

ejs
1コ<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>hello</title>
6  </head>
7  <body>
8    <div>
9      <p>買うもの</p>
10      <form method="post">
11        <input name="productName" type="text">
12        <input type="submit" value="作成する">
13      </form>
14    </div>
15    <ul>
16      <% products.forEach((product) => { %>
17        <li>
18          <div>
19            <span><%= product.id %></span>
20            <span><%= product.name %></span>
21            <span><%= product.price %></span>
22          </div>
23        </li>
24      <% }) %>
25    </ul>
26  </body>
27</html>

エラー文

TypeError: Cannot read property 'productName' of undefined

退会済みユーザー

2021/01/11 08:14

「リンクの挿入」で「Progateの記述」を貼っていただけると、回答する際のヒントになるかもです。

行動規範の内容に同意します

回答1件

ベストアンサー

POST された内容を受け取るには body-parser ってのが必要になりますが、Express 4.16.0 以降では Express に組み込まれたものを使えます。

js
1const app = express();
2app.use(express.urlencoded({ extended: true })); // この行を追加

参考: Body-ParserがExpressにexpress.json()として標準搭載されている話 - Qiita

また、POST の処理でデータベースへの追加が成功した場合の処理がおかしいですね。POST の中で結果を返すこともできますが、GET / にリダイレクトするのがお勧めです。(また、price も追加した方がいいのでは…。)

js
1app.post('/', (req, res, next) => { // 引数 next を追加
2  // データベースに追加する処理を書いてください
3  connection.query(
4    'INSERT INTO products(name) VALUES(?)',
5    [req.body.productName],
6    (error, results) => {
7      if (error) { return next(error); } // エラーの場合は next へ
8      res.redirect('/'); // GET / にリダイレクト
9    }
10  );
11});