我一直在研究 Udemy 课程老师(网络开发)的待办事项列表。这个烦人的错误让我坚持了几个星期,但它不起作用。它一直显示这个:
Cannot read property 'forEach' of undefined
at eval (eval at compile (C:\Users\huang\Web Development\Todo-List\node_modules\ejs\lib\ejs.js:618:12), <anonymous>:15:24)
at returnedFn (C:\Users\huang\Web Development\Todo-List\node_modules\ejs\lib\ejs.js:653:17)
at tryHandleCache (C:\Users\huang\Web Development\Todo-List\node_modules\ejs\lib\ejs.js:251:36)
at View.exports.renderFile [as engine] (C:\Users\huang\Web Development\Todo-List\node_modules\ejs\lib\ejs.js:482:10)
at View.render (C:\Users\huang\Web Development\Todo-List\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\huang\Web Development\Todo-List\node_modules\express\lib\application.js:640:10)
at Function.render (C:\Users\huang\Web Development\Todo-List\node_modules\express\lib\application.js:592:3)
at ServerResponse.render (C:\Users\huang\Web Development\Todo-List\node_modules\express\lib\response.js:1012:7)
at C:\Users\huang\Web Development\Todo-List\app.js:102:13
at C:\Users\huang\Web Development\Todo-List\node_modules\mongoose\lib\model.js:4870:18
at processTicksAndRejections (internal/process/task_queues.js:77:11)
这是代码--> list.ejs
<%- include("header") -%>
<div class="box" id="heading">
<h1> <%= listTitle %> </h1>
</div>
<div class="box">
<% newListItems.forEach(function(item){ %>
<form class="" action="/delete" method="post">
<div class="item">
<input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
<p><%= item.name %></p>
</div>
</form>
<% }) %>
<form class="item" action="/" method="post">
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="list">+</button>
</form>
</div>
<%- include("footer") -%>
app.js //jshint esversion:6
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(express.static("public"));
mongoose.connect("mongodb://localhost:27017/todolistDB");
const itemsSchema = {
name: String
};
const Item = mongoose.model("Item", itemsSchema);
const item1 = new Item({
name: "Welcome to your TodoList!"
});
const item2 = new Item({
name: "Reminder: Checkbox, + button & your preference to add!"
});
const item3 = new Item({
name: "Feel free to delete default things and make it your own!"
});
const defaultItems = [item1, item2, item3];
const listSchema = {
name: String,
items: [itemsSchema]
}
const List = mongoose.model("List", itemsSchema);
app.get("/", function(req, res) {
Item.find({}, function(err, foundItems) {
if (foundItems === 0) {
Item.insertMany(defaultItems, function(err) {
if (err) {
console.log(err);
} else {
console.log("Success!")
}
});
res.redirect("/");
} else {
res.render("list", {
listTitle: "Today",
newListItems: foundItems
});
}
});
});
app.post("/", function(req, res) {
const itemName = req.body.newItem;
const item = new Item({
name: itemName
});
item.save();
res.redirect("/");
});
app.post("/delete", function(req, res) {
const checkedItemId = req.body.checkbox;
Item.findByIdAndRemove(checkedItemId, function(err) {
if (!err) {
console.log("Successfully deleted checked item!");
res.redirect("/");
}
});
});
app.get("/:customListName", function(req, res) {
const customListName = req.params.customListName;
Item.find({
name: customListName
}, function(err, foundList) {
if (!err) {
if (!foundList) {
const list = new List({
name: customListName,
items: defaultItems
});
list.save();
res.redirect("/" + customListName);
} else {
res.render("list.ejs", {
listTitle: customListName,
newListItems: foundList.item
});
}
}
});
});
app.listen(3000, function() {
console.log("Server started on port 3000");
});
header.ejs
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>To Do List</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
footer.ejs
<footer>
TodoList Project
</footer>
styles.css
html {
background-color: #E4E9FD;
background-image: -webkit-linear-gradient(65deg, #A683E3 50%, #E4E9FD 50%);
min-height: 1000px;
font-family: 'helvetica neue';
}
h1 {
color: #fff;
padding: 10px;
}
.box {
max-width: 400px;
margin: 50px auto;
background: white;
border-radius: 5px;
box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}
#heading {
background-color: #A683E3;
text-align: center;
}
.item {
min-height: 70px;
display: flex;
align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
border-bottom: 0;
}
input:checked+p {
text-decoration: line-through;
text-decoration-color: #A683E3;
}
input[type="checkbox"] {
margin: 20px;
}
p {
margin: 0;
padding: 20px;
font-size: 20px;
font-weight: 200;
color: #00204a;
}
form.item {
text-align: center;
margin-left: 20px;
}
button {
min-height: 50px;
width: 50px;
border-radius: 50%;
border-color: transparent;
background-color: #A683E3;
color: #fff;
font-size: 30px;
padding-bottom: 6px;
border-width: 0;
}
input[type="text"] {
text-align: center;
height: 60px;
top: 10px;
border: none;
background: transparent;
font-size: 20px;
font-weight: 200;
width: 313px;
}
input[type="text"]:focus {
outline: none;
box-shadow: inset 0 -3px 0 0 #A683E3;
}
::placeholder {
color: grey;
opacity: 1;
}
footer {
color: white;
color: rgba(0, 0, 0, 0.5);
text-align: center;
}
这是我在 console.log(foundlist) 之后得到的; []
这是一个空数组。