如何将函数中的假 API 添加到 React.JS 应用程序

Question

我不知道如何从现有函数中包含假日期。我用 redux 创建了一个应用程序。并且简单的测试有效。

当我将日期添加到 HTML 并调用函数 FruitasticApi 时，一切正常。但是如果我想导入到组件我会出错，因为我的假日期文件中没有导出

我有 FruitasticApi.js（我有一些包含数据的数组）。

这是FruitastaticApi.js

(function(container) {
  var names = [
    'Chris', 'Svetla', 'Duncan', 'Vlad', 'Dennis', 'Amir', 'Kunjan', 'Aaron', 'Kirby', 'Michael',
    'Bryan', 'Edward', 'Stan', 'Eric', 'Jennifer', 'Kristy', 'Jason', 'Phoebe', 'Kate', 'Denise',
    'Abigail', 'Ethan', 'Lucia', 'Harry', 'David', 'Cameron', 'Erica', 'Sophie', 'Francis', 'Brian',
    'Paco', 'Luke', 'Margie', 'Sacha', 'Desmond', 'Ruby', 'Wanda', 'Rosalie', 'Angel', 'Layla', 'Flynn',
    'Anthony', 'Jasmine', 'Janie', 'Debbie', 'Keith', 'Porter', 'Francisco', 'Javier', 'Rudolph'
  ];
  var letters = 'ABCDEFGHIJKLMNOPRSTVWY'.split('');
  var fruits = [
    'blackberries', 'apple', 'orange', 'banana', 'pear', 'watermelon', 'cherries', 'mango',
    'grapes', 'apple', 'orange', 'cantaloupe', 'strawberries', 'kiwi', 'pineapple', 'pomegranate'
  ];

  var fruitsAPI = {
    get: function(callback) {
      var iter = 30 + Math.round(Math.random() * 50);

      var fruitIter = 3 + Math.ceil(Math.random() * 4);
      var availFruits = pickFruits(fruitIter);

      var arr = [];
      for (var i = 0; i < iter; i++) {
        var randF = Math.floor(Math.random() * names.length);
        var randL = Math.floor(Math.random() * letters.length);
        var randFruit = Math.floor(Math.random() * availFruits.length);
        arr[i] = {
          name: names[randF] + ' ' + letters[randL] + '.',
          favoriteFruit: availFruits[randFruit]
        }
      }
      var timeout = Math.floor(Math.random() * 500) + 100;
      setTimeout(function() {
        if (callback) {
          callback(arr);
        }
      }, timeout);
    }
  };

  function pickFruits(num) {
    var availFruits = [];
    var rerun = true;
    while (rerun) {
      for (var j = 0; j < num; j++) {
        var index = Math.floor(Math.random() * fruits.length);
        availFruits.push(fruits[index]);
      }
      var seen = availFruits[0];
      for (var i = 1; i < availFruits.length; i++) {
        if (availFruits[i] !== seen) {
          rerun = false;
        }
      }
    }
    return availFruits;
  }

  container.FruitasticApi = fruitsAPI;
})(window);

这是我尝试做的：

import React, { Component } from 'react';
import { simpleAction } from './actions/fruitaStaticAPI';
import { FruitasticApi } from './FruitasticApi'
import { connect } from 'react-redux';
import './main.css';

class App extends Component {
  render() {
    console.log(FruitasticApi)
    return (
      <div className="App">


      </div>
    );
  }
}
const mapStateToProps = state => ({
  ...state
})
const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction())
})
export default connect(mapStateToProps, mapDispatchToProps)(App);

这是我的任务：通过调用 FruitasticApi.get().

加载数据

Answer 1

只是做一个没有隔离范围的正常 export:

(function(container) {
//...
})(window);

然后导出（文件中的最后一行）

export const FruitasticApi = fruitsAPI;

然后，您可以在组件文件中导入它：

import { FruitasticApi } from './FruitasticApi'

工作示例：https://stackblitz.com/edit/react-wekuan

别忘了打开控制台

或者，如果您必须使用隔离方法，您的代码将 FruitasticApi 分配给 window

container.FruitasticApi = fruitsAPI;

因此，您可以使用

在您的组件文件中获取它

console.log(window.FruitasticApi);

工作示例：https://stackblitz.com/edit/react-wshnyh

Answer 2

您应该将 FruitasticApi 作为 const 函数，如下所示：

export const FruitasticApi = callback => {
  var names = [
    'Chris',
    'Svetla',
    'Duncan',
    'Vlad',
    'Dennis',
    'Amir',
    'Kunjan',
    'Aaron',
    'Kirby',
    'Michael',
    'Bryan',
    'Edward',
    'Stan',
    'Eric',
    'Jennifer',
    'Kristy',
    'Jason',
    'Phoebe',
    'Kate',
    'Denise',
    'Abigail',
    'Ethan',
    'Lucia',
    'Harry',
    'David',
    'Cameron',
    'Erica',
    'Sophie',
    'Francis',
    'Brian',
    'Paco',
    'Luke',
    'Margie',
    'Sacha',
    'Desmond',
    'Ruby',
    'Wanda',
    'Rosalie',
    'Angel',
    'Layla',
    'Flynn',
    'Anthony',
    'Jasmine',
    'Janie',
    'Debbie',
    'Keith',
    'Porter',
    'Francisco',
    'Javier',
    'Rudolph',
  ];
  var letters = 'ABCDEFGHIJKLMNOPRSTVWY'.split('');
  var fruits = [
    'blackberries',
    'apple',
    'orange',
    'banana',
    'pear',
    'watermelon',
    'cherries',
    'mango',
    'grapes',
    'apple',
    'orange',
    'cantaloupe',
    'strawberries',
    'kiwi',
    'pineapple',
    'pomegranate',
  ];

  var fruitsAPI = {
    get: function(callback) {
      var iter = 30 + Math.round(Math.random() * 50);

      var fruitIter = 3 + Math.ceil(Math.random() * 4);
      var availFruits = pickFruits(fruitIter);

      var arr = [];
      for (var i = 0; i < iter; i++) {
        var randF = Math.floor(Math.random() * names.length);
        var randL = Math.floor(Math.random() * letters.length);
        var randFruit = Math.floor(Math.random() * availFruits.length);
        arr[i] = {
          name: names[randF] + ' ' + letters[randL] + '.',
          favoriteFruit: availFruits[randFruit],
        };
      }
      var timeout = Math.floor(Math.random() * 500) + 100;
      setTimeout(function() {
        if (callback) {
          callback(arr);
        }
      }, timeout);
    },
  };

  function pickFruits(num) {
    var availFruits = [];
    var rerun = true;
    while (rerun) {
      for (var j = 0; j < num; j++) {
        var index = Math.floor(Math.random() * fruits.length);
        availFruits.push(fruits[index]);
      }
      var seen = availFruits[0];
      for (var i = 1; i < availFruits.length; i++) {
        if (availFruits[i] !== seen) {
          rerun = false;
        }
      }
    }
    return availFruits;
  }

  return fruitsAPI.get(callback);
};

现在，如果您尝试从您的组件中调用它：

import React, { Component } from 'react';
import { simpleAction } from './actions/fruitaStaticAPI';
import { FruitasticApi } from './FruitasticApi'
import { connect } from 'react-redux';
import './main.css';

class App extends Component {
  render() {
    FruitasticApi(data => console.log(data))
    return (
      <div className="App">


      </div>
    );
  }
}
const mapStateToProps = state => ({
  ...state
})
const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction())
})
export default connect(mapStateToProps, mapDispatchToProps)(App);

您应该能够在控制台中看到结果。

如何将函数中的假 API 添加到 React.JS 应用程序

How to include fake API from function to React.JS app

reactjs

es6-modules