javascript - 无法读取未定义 Jade 的属性 'length'

Question

我是 nodejs 的新手，通过构建一个小项目(博客)来学习它，在提交添加帖子表单详细信息时面临下面提到的问题。我还为 addPost.jade 和 post.js 添加了代码。

TypeError: E:\Web projects\NodeJs projects\nodeBlog\views\addpost.jade:19
  17|               label Category:
  18|               select.form-control(name='category')
> 19|                   each cat, i in catList
  20|                       option(value = '#{cat.title}') #{cat.title}
  21|           .form-group
  22|               label Body:

Cannot read property 'length' of undefined
    at eval (eval at <anonymous> (E:\Web projects\NodeJs projects\nodeBlog\node_modules\jade\lib\index.js:218:8), <anonymous>:210:31)
    at eval (eval at <anonymous> (E:\Web projects\NodeJs projects\nodeBlog\node_modules\jade\lib\index.js:218:8), <anonymous>:247:4)
    at eval (eval at <anonymous> (E:\Web projects\NodeJs projects\nodeBlog\node_modules\jade\lib\index.js:218:8), <anonymous>:383:22)
    at res (E:\Web projects\NodeJs projects\nodeBlog\node_modules\jade\lib\index.js:219:38)
    at Object.exports.renderFile (E:\Web projects\NodeJs projects\nodeBlog\node_modules\jade\lib\index.js:380:38)
    at Object.exports.renderFile (E:\Web projects\NodeJs projects\nodeBlog\node_modules\jade\lib\index.js:370:21)
    at View.exports.__express [as engine] (E:\Web projects\NodeJs projects\nodeBlog\node_modules\jade\lib\index.js:417:11)
    at View.render (E:\Web projects\NodeJs projects\nodeBlog\node_modules\express\lib\view.js:126:8)
    at tryRender (E:\Web projects\NodeJs projects\nodeBlog\node_modules\express\lib\application.js:639:10)
    at EventEmitter.render (E:\Web projects\NodeJs projects\nodeBlog\node_modules\express\lib\application.js:591:3)
    at ServerResponse.render (E:\Web projects\NodeJs projects\nodeBlog\node_modules\express\lib\response.js:960:7)
    at E:\Web projects\NodeJs projects\nodeBlog\routes\post.js:89:6
    at Layer.handle [as handle_request] (E:\Web projects\NodeJs projects\nodeBlog\node_modules\express\lib\router\layer.js:95:5)
    at next (E:\Web projects\NodeJs projects\nodeBlog\node_modules\express\lib\router\route.js:131:13)
    at Immediate.<anonymous> (E:\Web projects\NodeJs projects\nodeBlog\node_modules\multer\lib\make-middleware.js:53:37)
    at runCallback (timers.js:655:20)

addPost.jade 文件，可以很好地用于 GET 请求

//Created by Sinner on 11-Apr-17.

extends layout

block content
    h1=title
    ul.errors
        if errors
            each error, i in errors
                li.alert.alert-danger #{error.msg}

        form(method='post', action='/posts/add', enctype='multipart/form-data')
            .form-group
                label Title:
                input.form-control(name='title', type='text')
            .form-group
                label Category:
                select.form-control(name='category')
                    each cat, i in catList
                        option(value = '#{cat.title}') #{cat.title}
            .form-group
                label Body:
                textarea.form-control(name='body', id='body')
            .form-group
                label Main Image:
                input.form-control(name='mainimage', type='file')
            .form-group
                label Author:
                select.form-control(name='author')
                    option(value='Akshay Gupta') Akshay Gupta
                    option(value='Riddhi Tandon') Riddhi Tandon
            input.btn.btn-default(name='Submit', type='submit', value='Save')
            script(src='/ckeditor/ckeditor.js')
            script CKEDITOR.replace('body')

post.js 文件

var express = require('express');
var router = express.Router();
var mongo = require('mongodb');
var db = require('monk')('localhost/nodeblog');
var multer = require('multer');
var uploads = multer({ dest: './public/images/uploads' });




/* home page blog Post. */
router.get('/add', function(req, res, next) {
    var categoryList = db.get('categories');
    categoryList.find({},{}, function (err, categoryList) {
        /*console.log("Categories"+categories);
        categories.forEach(function(category){
            console.log(category.title);
        });*/
        res.render('addPost',{
            "title": "Add Post",
            "catList" : categoryList
        });
    });

});

router.post('/add', uploads.single('mainimage'), function(req, res, next) {
    // get form values
    var title       = req.body.title;
    var category    = req.body.category;
    var body        = req.body.body;
    var author      = req.body.author;
    var date        = new Date();
    console.log("Title"+title);
    console.log("Category"+category);
    console.log("body"+body);
    console.log("Author"+author);
    console.log("Date"+date);

    //Check for image field
    if(req.files && req.files.mainimage){
        console.log('Uploading file...');
        var mainImageOrginalName = req.files.mainimage.originalname;
        var mainImageName = req.files.mainimage.name;
        var mainImageMime = req.files.mainimage.mimetype;
        var mainImagePath = req.files.mainimage.path;
        var mainImageExt = req.files.mainimage.extension;
        var mainImageSize = req.files.mainimage.size;
    }
    else{
        console.log('mainImageFile not found....');
        var mainImageName = 'noimage.png';
    }

    //form Validations
    req.checkBody('title','Title field is required').notEmpty();
    req.checkBody('body','Body field is required').notEmpty();

    var errors = req.validationErrors();

    if(errors){
        res.render('addPost',{
            "errors": errors,
            "title" : title,
            "body" : body
        });
    }else{
        var posts = db.get('posts');

        // add it to db
        posts.insert({
            "title":title,
            "body":body,
            "category": category,
            "date":date,
            "author":author,
            "mainimage":mainImageName
        }, function (err, post) {
            if(err){
                res.send('There was an issue submitting the post');
            }else{
                req.flash('success', "Post Submitted");
                req.location('/');
                req.redirect('/');
            }
        });
    }

    res.render('addpost',{
        "title": "Add Post"
    });
});

module.exports = router;

请帮助我解决这个问题，因为我遇到了这个问题。

PS: 帖子也在添加中

谢谢

Answer 1

问题出在这段代码。

//form Validations
    req.checkBody('title','Title field is required').notEmpty();
    req.checkBody('body','Body field is required').notEmpty();

    var errors = req.validationErrors();

    if(errors){
        // Edited
        categoryList.find({},{}, function (err, categoryList) {
           res.render('addPost',{
             "errors": errors,
             "title" : title,
             "body" : body
             "catList" : categoryList
           });
        });
    }else{
        var posts = db.get('posts');

        // add it to db
        posts.insert({
            "title":title,
            "body":body,
            "category": category,
            "date":date,
            "author":author,
            "mainimage":mainImageName
        }, function (err, post) {
            if(err){
                res.send('There was an issue submitting the post');
            }else{
                req.flash('success', "Post Submitted");
                req.location('/');
                req.redirect('/');
            }
        });
    }
    
    //To be specific this one
    res.render('addpost',{
        "title": "Add Post"
    });

由于异步过程，您的最后一段代码 res.render() 将在 posts.insert(); 之前运行。哪些没有 catList。

更新:

你可以通过检查你的 Jade 中是否有catList来解决这个问题，就像你检查错误一样。如下所示:

.form-group
            label Category:
            select.form-control(name='category')
              if catList
                each cat, i in catList
                    option(value = '#{cat.title}') #{cat.title}

另一件事是，我不明白你最后有 res.render() 而你的代码中包含了所有情况。