如何在Meteor + React中使用chimpmail?

时间:2016-08-11 09:23:07

标签: javascript meteor reactjs mailchimp

首先感谢花时间阅读本文,我不得不说我是网络开发领域的新人。我一直要求在项目中实施mailchimp(我从未听说过),为此我刚刚开始搜索有关chimpmail API的信息,我也按照meteorchef的教程和问题是我可以做这个工作,我发现用React实现这个很困难。当我输入邮件并运行onSubmit方法时,我的方法有问题,控制台输出说"方法handleSubscriber not found"。到目前为止,我刚从教程中创建了handleSubscriber部分,我没有显示任何电子邮件列表。我用meteor --settings=settings.json运行我的Meteor应用程序。我真的很感激一些帮助。

更新

我收到了一条有用的评论,指出我应该将我的方法文件添加到我的服务器目录中。通过这样做,我不再得到"方法handleSubscriber not found"而不是我现在得到Exception while invoking method 'handleSubscriber' Error: Match error: Expected object, got null

这是我的Meteor套餐:

meteor-base
mobile-experience
mongo
blaze-html-templates
reactive-var
jquery
tracker
library

standard-minifier-css
standard-minifier-js    
es5-shim
ecmascript

react-meteor-data@0.2.6-beta.16
accounts-ui
accounts-password
practicalmeteor:mocha
miro:mailchimp
fortawesome:fontawesome
themeteorchef:bert
standard-app-packages
underscore
themeteorchef:jquery-validation
check

这是我的settings.json

{
  "public": {},
  "private": {
     "MailChimp": {
       "apiKey": "theapikey",
       "listId": "thislsitId"
      }
   }
}

chimpMail.js

import { Meteor } from 'meteor/meteor';
import { check } from 'meteor/check';

const settings = Meteor.settings.private.MailChimp;
const chimp = new MailChimp( settings.apiKey, { version: '2.0' });
const listId = settings.listId;

Meteor.methods({
  'handleSubscriber'(subscriber) {
    check(subscriber, {
      email: String,
      action: String,
    });
  try {
    const subscribe = chimp.call('lists', subscriber.action, {
      id: listId,
       email: {
        email: subscriber.email,
       },
    });
     return subscribe;
    } catch (exception) {
      return exception;
   }
 },
});

这是我的emailSubscription.jsx

import { Meteor } from 'meteor/meteor';
import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

class EmailSubscription extends Component {
   handleOnSubmit(event) {
     event.preventDefault();

     Meteor.call('handleSubscriber', this.props.subscriber,        
       function(error, response) {
       if (error) {
          Bert.alert(error.reason, "warning");
       } else {
       if (response.complete || response.euid) {
          const subscribeMessage = 'Please confirm your email to  
           complete your subscription!';
          const unsubscribeMessage = subscriber.email + 'successfully 
           unsubscribed!';
          const message = subscriber.action === "subscribe" ? 
           subscribeMessage : unsubscribeMessage;

          Bert.alert(message, "success");
       } else {
         Bert.alert(response.message, "warning");
       }
     }
   });
}

render() {
  return (
    <div className="container">
      <form onSubmit={this.handleOnSubmit.bind(this)} 
         className="emal-submit"
       >
        <input type="email" placeholder="email@example.com" />
        <button>Sign Me Up!</button>
      </form>
    </div>
   );
  }
}
export default createContainer(() => {
}, EmailSubscription);

1 个答案:

答案 0 :(得分:0)

  

&#34;方法handlerSubscriber not found&#34;是说你的方法。

请导入服务器目录中的方法文件。

  

调用方法&#39; handleSubscriber&#39;错误:匹配错误:预期对象,为空

这是您获得的异常,因为订阅者需要是一个对象,但您从客户端发送null。检查函数抛出此异常。