无法读取未定义错误的属性“forEach”

时间:2021-07-01 23:54:23

标签: javascript

我一直在研究 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) 之后得到的; []

这是一个空数组。

0 个答案:

没有答案