无法读取 null 的属性“标题”答案

【问题标题】：Cannot read property 'heading' of null无法读取 null 的属性“标题”
【发布时间】：2021-08-04 12:54:12
【问题描述】：

我的问题是浏览器端出现意外错误，提示 Cannot read property 'heading' of null

还在客户端页面文件中标记此错误，例如 about.ejs 并显示；在附加的快照中

我已提供与此相关的所有必需代码。我多次查看以查找实际错误的来源或位置，但无法修复它。

about.ejs 的代码

<%-include('./partials/header')%>

<div class="container-fluid">
    <h1>About Section</h1>
    <div class="card shadow mb-4">
        <div class="card-header">
            <form action="/admin/portfolio/create" method="post">
                <button type="submit" class="btn btn-success">Edit About Page</button>
                </form>
        </div>
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">About Area</h6>
           
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <form  action="/admin/about" method="post" >
                  <div class="form-group">
                      <label for="exampleFormControlInput1">Headings:</label>
                    <input class="form-control" type="text" name="heading" id="exampleFormControlInput1" value="<%=about.heading%>" >
                  </div>

                  <div class="form-group">
                    <label for="exampleFormControlInput2">Sub-Headings:</label>
                  <input class="form-control" type="text" name="subheading" id="exampleFormControlInput2" value="<%=about.subheading%>" >
                </div>


                  <div class="form-group">
                    <textarea id="editor1" name="content" rows="10" cols="80"><%=about.content%></textarea>
                  </div>
                  <button type="submit" class="btn btn-primary">Save & Update</button>
                
                </form>
               
                    </div>
                    </div>

</div>

<%-include('./partials/footer')%>

这是我的 router.js 文件

router.get('/admin/about',serverController.isAuthenticated,serverController.about)
router.post('/admin/about',serverController.isAuthenticated,serverController.about_post)

这也是我的控制器文件

exports.about = async function(req,res){

    res.render('server/about', {
        about : await aboutCollection.findOne()
    })
}

exports.about_post = function(req,res){

    let about = new About(req.body)
    about.create().then(async()=>{
        res.redirect('/admin/about')
    }).catch(()=>{
        res.send('404')
    })
}

最后这一切都是关于我的关于页面的模型

const aboutCollection = require('../db').db().collection('about')
const objectId = require('mongodb').ObjectID



const About  = function(about){
    this.about = about
}

About.prototype.create = function(){
    return new Promise(async(resolve,reject)=>{
        await aboutCollection.updateOne({}, {$set : 
            {
            heading : this.about.heading,
            subheading : this.about.subheading,
            content : this.about.content
        }
    })
        resolve()


    })
}

module.exports = About

【问题讨论】：

标签： node.js mongodb express model-view-controller ejs

【解决方案1】：

这是因为在 ejs tag 我的意思是发送的值为 none

<%= about.heading%>

做，

exports.about = async function(req,res){

    res.render('server/about', {
        about : await aboutCollection.find().toArray()
    })
}

而不是，

exports.about = async function(req,res){

    res.render('server/about', {
        about : await aboutCollection.findOne()
    })
}

就我而言，我这样做了；尝试后发现错误消失了。

【讨论】：