[Q&A] node.jsでTypeError: Cannot read properties of undefinedが発生する

node.jsでTypeError: Cannot read properties of undefinedが発生する

解決したいこと

progateの課題を参照して、オリジナルのものを作成しています。

node.js(Express)で
TypeError: Cannot read properties of undefined
というエラーが発生しています。
console.logで確認したところ、フォームに入力した値がundefinedになっているようなのですが、文法間違い等が見つけられず解決できていない状態です。
4つのデータをフォームから入力して、データベースに登録するための機能です。

発生している問題・エラー

TypeError: Cannot read properties of undefined (reading 'title')
    at /Users/ken/node/crm-system/app.js:39:26
    at Layer.handle [as handle_request] (/Users/ken/node/crm-system/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/ken/node/crm-system/node_modules/express/lib/router/route.js:144:13)
    at Route.dispatch (/Users/ken/node/crm-system/node_modules/express/lib/router/route.js:114:3)
    at Layer.handle [as handle_request] (/Users/ken/node/crm-system/node_modules/express/lib/router/layer.js:95:5)
    at /Users/ken/node/crm-system/node_modules/express/lib/router/index.js:284:15
    at Function.process_params (/Users/ken/node/crm-system/node_modules/express/lib/router/index.js:346:12)
    at next (/Users/ken/node/crm-system/node_modules/express/lib/router/index.js:280:10)
    at serveStatic (/Users/ken/node/crm-system/node_modules/serve-static/index.js:75:16)
    at Layer.handle [as handle_request] (/Users/ken/node/crm-system/node_modules/express/lib/router/layer.js:95:5)

該当するソースコード

new.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CRM-SYSTEM</title>
    <link rel ="stylesheet" href="/css/style.css">
    <script src="send_url.js"></script>
  </head>
  <body>
    <header>
      <a href="/" class="header-logo">案件管理システム</a>
    </header>
    <div class="container">
      <div class="container-header">
        <h1>新規案件作成</h1>
      </div>
      <form action='/create' method ='post'>
        <p>現場名</p>
        <input type='text' name='title'>
        <p>工事内容</p>
        <input type='text' name='detail'>
        <p>住所</p>
        <input type='text' name='address'>
        <p>進捗</p>
        <input type='text' name='progress'>
        <input type="submit" value="新規案件の登録">
        <a href="/index">ホームに戻る</a>
      </form>
    </div>
  </body>
</html>

app.js

const express = require('express');
const mysql = require('mysql');
const session = require('express-session');
const bcrypt = require('bcrypt');

const app = express();

app.use(express.static('public'));

const connection = mysql.createConnection({
  // host: 'localhost',
  host:'127.0.0.1',
  user: 'root',
  password: 'password',
  database: 'crm_system'
});

略

app.get('/new',(req,res) =>{
  res.render('new.ejs');
});

app.post('/create',(req,res) => {
  console.log(req.body);
  const title = req.body.title;　　　　　　　　←この行がエラーとなっている行です。
  const detail = req.body.detail;
  const address = req.body.address;
  const progress = req.body.progress;
  connection.query(
    'INSERT INTO projects (title,detail,address,progress)VALUES(?, ?, ?, ?)',
    [title,detail,address,progress],
    (error,results) => {
      res.redirect('/index');
    }
  );
});

略

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

エラー分の前でコンソールに出力:undefined
入力する項目を減らしてみる：変わらず
同種エラーについて調べてみましたが、定数の名前が間違っている、というものが多く
定数名の間違いについて確認
（ただし、postのデータを受け取れていない感じなので、該当しないかと思いました）

1Answer

@Verclene posted at 2023-09-04

Expressでパラメータを受け取るには,何かしらパーサーを設定してください.

// ルーティングの前に設定
// 普通のフォームデータの場合
app.use(express.urlencoded({ extended: false }));

// application/jsonを受け取る場合の例
app.use(express.json());

2Like

Comments

@kenken0413
Questioner
ありがとうございます
app.use(express.urlencoded({ extended: false }));
で解決しました。