【问题标题】:Meteor: "TypeError: undefined is not an object" when using collectionMeteor:使用集合时“TypeError:未定义不是对象”
【发布时间】:2019-03-05 23:28:42
【问题描述】:

我只是在尝试 Meteor,而且我在 Javascript 方面也不是很先进。我正在尝试使用模板在客户端的集合中显示对象的文本属性,但出现标题中提到的错误。我只是稍微修改了默认的 Meteor 基础项目。

ma​​in.html:

<head>
  <title>Test</title>
</head>

<body>
  <section>
    {{> tweet}}
  </section>
</body>

<template name="tweet">
  <h1 class="mt-5">{{text}}</h1>
</template>

ma​​in.js

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';

import './main.html';
import 'bootstrap/dist/js/bootstrap.bundle';

Tweets = new Mongo.Collection('tweets');

Template.tweet.onCreated(function tweetOnCreated() {
  var txt = Tweets.findOne().text;
  this.text = new ReactiveVar(txt);
});

Template.tweet.helpers({
  text() {
    return Template.instance().text.get();
  },
});

var txt = Tweets.findOne().text; 有什么问题?我在这里对 Javascript 有一个普遍的误解,还是这个错误与 Meteor 的工作方式有某种关系?

【问题讨论】:

    标签: javascript meteor


    【解决方案1】:

    这与 Meteor 的工作原理有关。

    当客户端启动时,它还没有任何数据。客户端然后打开与服务器的订阅(假设您仍然安装了默认的自动发布包,这是为您完成的),随后很快通过数据发送。

    这里的问题就是这个“不久之后”的部分。

    在您的情况下,这意味着当Tweets.findOne() 运行时,它还没有数据,因此没有可读取text 的文档。因此错误。通过检查是否返回了文档来防止错误:

    Template.tweet.onCreated(function () {
      var doc = Tweets.findOne();
      if (doc) {
        this.text = new ReactiveVar(doc.text);
      }
    });
    

    如果您尝试一下,错误将会消失,但仍然没有呈现文本。

    所以现在我们希望该部分代码在数据可用时再次运行。 Blaze 会在助手中自动​​执行此操作,但在其他任何地方您都需要将其包装在 autorun 中:

    Template.tweet.onCreated(function () {
      this.text = new ReactiveVar();
      this.autorun(() => {
        var doc = Tweets.findOne();
        if (doc) {
          this.text.set(doc.text);
        }
      });
    });
    

    我还将反应 var 的创建移出自动运行,因为我们只想创建一次,然后设置或获取它的值。

    另外,我之前提到助手会自动自动运行。这意味着您可以在帮助程序中找到推文以稍微简化您的模板:

    Template.tweet.helpers({
      text() {
        var doc = Tweets.findOne();
        if (doc) return doc.text;
      },
    });
    

    更好的是,我们不再需要ReactiveVar 并且可以删除整个onCreated 函数!

    【讨论】:

      猜你喜欢
      • 2013-07-10
      • 2014-07-12
      • 2021-06-11
      • 1970-01-01
      • 2018-12-21
      • 2021-12-17
      • 2021-12-01
      • 2019-11-16
      • 2020-02-09
      相关资源
      最近更新 更多