JavaScript 和 ReactJs

Question

我有单独的 js 文件调用 api.js 并且我在那里定义了一个函数

FetchDetails = function auth() {
   return {
     initialize: function() {

          var deferredObject = $.Deferred();

         var config = {
           'client_id': '',my client id
           'scope': 'https://www.google.com/m8/feeds'
         };

         gapi.auth.authorize(config, function () {
           var token = gapi.auth.getToken();
           var contacts = {
             contact: []
           };
           var name;
           var friends;

           $.ajax({
             url: "https://www.google.com/m8/feeds/contacts/default/full?access_token=" + token.access_token + "&alt=json&max-results=3000",
             dataType: "json",
             success: function (data) {
               var json_res = JSON.stringify(data);
               var response_as_array = jQuery.parseJSON(json_res);
               for (var i = 0; i < response_as_array['feed']['entry'].length; i++) {
                 name = response_as_array['feed']['entry'][i]['title']['$t'] != null ? response_as_array['feed']['entry'][i]['title']['$t'] : null;
                 if (response_as_array['feed']['entry'][i]['gd$email'] != null && name != null && name != "") {
                   contacts.contact.push({
                     "fullName" : name,
                     "email"  : response_as_array['feed']['entry'][i]['gd$email'][0]['address']
                   });
                 }
               }
               deferredObject.resolve(contacts);
             }
           });
         });

         return deferredObject.promise();
     }
   };
}

我需要在我的 .jsx 文件 handleClick() 方法中调用此函数。你可以在下面看到 .jsx 文件

import { Component, PropTypes } from 'react';

export default class FriendRight extends Component {

  handleClick() {
    require ('../api_call/apis.js');
    FetchDetails().initialize().then(function(results) {
      this.setState({
        contacts: results.contact
      });
    }.bind(this));
  }

  render(){
    return(
      <div><ul class="list-group">
        <li className="list-group-item"><button type="button" className="btn btn-default" onClick={this.handleClick}>Yahoo</button></li>
        <li className="list-group-item"><button type="button" className="btn btn-default">Gmail</button></li>
        <li className="list-group-item"><button type="button" className="btn btn-default" >Outlook</button></li>
        <li className="list-group-item"><button type="button" className="btn btn-default" >Facebook</button></li>
      </ul>
    </div>
  );
}

}

调用此函数时出现此错误

未捕获的引用错误：未定义 FetchDetails

Answer 1

您需要导出和导入 FetchDetails，例如在您的 api.js 模块中：

export const FetchDetails = function auth() { // ...

并在您的 jsx 文件中：

import { FetchDetails } from './api.js';

我假设api.js和jsx文件在同一个目录下，否则你需要在导入语句中提供相对路径。

JavaScript 和 ReactJs

JavaScript and ReactJs

javascript

jquery

meteor

reactjs

es6-module-loader