Express CRUD操作报错：Cannot read properties of undefined (reading 'comment')

我正在构建一个简单的评论管理应用，支持展示评论列表、发布新评论以及编辑和删除已有评论，开发过程参考Colt Steele课程的第371节。但代码运行中出现异常：有时无法识别引用的对象，有时又能正常识别，不确定问题根源所在。

后端Node.js代码 #

const express = require('express')
const path = require('path')
const methodOverride = require('method-override')
const app = express();
const { v4: uuid } = require('uuid'); //For generating ID's


app.set('view engine', 'ejs')
app.set('views', path.join(__dirname, 'views'))
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(methodOverride('_method'))



let comments = [
    {
        username: 'External_Mall_3897',
        comment: 'that Kana"s death stare when she sees Aqua princess carry Akane 😂',
        score: 564,
        id: uuid()

    },
    {
        username: 'Acrzyguy',
        comment: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        score: 304,
        id: uuid()
    },
    {
        username: 'mr_miscellaneous123',
        comment: 'How on earth did Aqua keep up that kind of acting for all the performances?',
        score: 461,
        id: uuid()
    },

]

app.get('/comments', (req, res) => {
    res.render('index', { comments })
})

app.get('/comments/new', (req, res) => {
    res.render('new')
})
app.post('/comments', (req, res) => {
    const { username, comment } = req.body;
    comments.push({ username, comment, score: 0, id: uuid() })
    res.redirect('/comments')
})

app.get('/comments/:id', (req, res) => {
    const { id } = req.params;
    const comment = comments.find(c => c.id === id);
    res.render('show', { comment })
})
app.get('/comments/:id/edit', (req, res) => {
    const { id } = req.params;
    const comment = comments.find(c => c.id === id);
    res.render('edit', { comment })
})
app.patch('/comments/:id/', () => {
    const { id } = req.params;
    const foundComment = comments.find(c => c.id === id)
    const newCommentText = req.body.comment
    foundComment.comment = newCommentText;
    res.redirect('/comments')
    })

    app.listen(3030, () => {
    console.log('listening on 3030')
    })

EJS模板文件 #

index.ejs #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1>Comments</h1>
        <a href="/comments/new" class="btn btn-primary mb-3">Add New Comment</a>
        <div class="list-group">
            <% comments.forEach(comment => { %>
                <div class="list-group-item">
                    <h5 class="mb-1"><%= comment.username %></h5>
                    <p class="mb-1"><%= comment.comment %></p>
                    <small>Score: <%= comment.score %></small>
                    <div class="mt-2">
                        <a href="/comments/<%= comment.id %>" class="btn btn-sm btn-info">View</a>
                        <a href="/comments/<%= comment.id %>/edit" class="btn btn-sm btn-warning">Edit</a>
                        <form action="/comments/<%= comment.id %>?_method=DELETE" method="POST" class="d-inline">
                            <button class="btn btn-sm btn-danger">Delete</button>
                        </form>
                    </div>
                </div>
            <% }) %>
        </div>
    </div>
</body>
</html>

new.ejs #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add New Comment</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1>Add New Comment</h1>
        <form action="/comments" method="POST">
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control" id="username" name="username" required>
            </div>
            <div class="mb-3">
                <label for="comment" class="form-label">Comment</label>
                <textarea class="form-control" id="comment" name="comment" rows="3" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit Comment</button>
            <a href="/comments" class="btn btn-secondary ms-2">Cancel</a>
        </form>
    </div>
</body>
</html>

show.ejs #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= comment.username %>'s Comment</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1><%= comment.username %>'s Comment</h1>
        <div class="card">
            <div class="card-body">
                <p class="card-text"><%= comment.comment %></p>
                <p class="card-text"><small class="text-muted">Score: <%= comment.score %></small></p>
            </div>
        </div>
        <div class="mt-3">
            <a href="/comments" class="btn btn-secondary">Back to Comments</a>
            <a href="/comments/<%= comment.id %>/edit" class="btn btn-warning ms-2">Edit Comment</a>
            <form action="/comments/<%= comment.id %>?_method=DELETE" method="POST" class="d-inline">
                <button class="btn btn-danger ms-2">Delete Comment</button>
            </form>
        </div>
    </div>
</body>
</html>

edit.ejs #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Comment</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1>Edit Comment</h1>
        <form action="/comments/<%= comment.id %>?_method=PATCH" method="POST">
            <div class="mb-3">
                <label for="username" class="form-label">Username</label>
                <input type="text" class="form-control" id="username" name="username" value="<%= comment.username %>" required>
            </div>
            <div class="mb-3">
                <label for="comment" class="form-label">Comment</label>
                <textarea class="form-control" id="comment" name="comment" rows="3" required><%= comment.comment %></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Update Comment</button>
            <a href="/comments/<%= comment.id %>" class="btn btn-secondary ms-2">Cancel</a>
        </form>
    </div>
</body>
</html>

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