javascript - 未捕获的 RangeError : Maximum call stack size exceeded Meteor. js 表单

Question

我有一个要提交的表单(并使用 reactiveVar 更改提交时 View 中的输出)。每当我成功提交时，我都会收到这个不祥的错误:

Uncaught RangeError: Maximum call stack size exceeded
isArguments @ es5-shim.js:888
keys @ es5-shim.js:951
_.each._.forEach @ underscore.js:111
EJSON.clone @ ejson.js:500
(anonymous function) @ ejson.js:501
_.each._.forEach @ underscore.js:113
EJSON.clone @ ejson.js:500
(anonymous function) @ ejson.js:501
_.each._.forEach @ underscore.js:113
EJSON.clone @ ejson.js:500

我在 someview.js 中有两个事件处理程序:

Template.inquiry.events({
  'click .submit': function(event, template) {
    var $form = template.$('#request-form');

    if ($form.valid()) {
          template.showForm.set( false );

          Meteor.setTimeout( function() {
            template.showForm.set( true );
          }, 10000); // Reset after 10 seconds.
    }
  },
});

Template.inquiry.events({
    'submit form': function(event) {
        event.preventDefault();
        var name = event.target.name.value;
        var email = event.target.email.value;

        UserList.insert({
            name: name,
            email: email
        });
    }
});

和一个获取初始 reactiveVar (showForm) 的助手:

Template.inquiry.helpers({

  //toggles 'thank you' on inquiry template
  showForm: function () {
    return Template.instance().showForm.get();
  },
});

为什么会出现此错误？

Answer 1

你不应该同时触发 2 个事件。单击按钮的那一刻，表单也被提交(我相信 timeout 正在提交和单击之间进行递归调用)，从而给您带来意外错误。您需要将这两个合并在一起(这很自然)

Template.inquiry.events({
    'submit form': function(event, template) {

    event.preventDefault();
    var $form = template.$('#request-form');

    if ($form.valid()) {
        var name = event.target.name.value;
        var email = event.target.email.value;

        UserList.insert({
            name: name,
            email: email
        });

        template.showForm.set( false );

        Meteor.setTimeout( function() {
            template.showForm.set( true );
        }, 10000); // Reset after 10 seconds.
    }
}

});

并移除click事件