首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ES6模块实现,如何加载json文件

ES6模块实现,如何加载json文件
EN

Stack Overflow用户
提问于 2015-11-11 20:19:00
回答 4查看 122.2K关注 0票数 90

我正在实现一个来自https://github.com/moroshko/react-autosuggest的示例

重要代码如下:

代码语言:javascript
复制
import React, { Component } from 'react';
import suburbs from 'json!../suburbs.json';

function getSuggestions(input, callback) {
  const suggestions = suburbs
    .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))
    .sort((suburbObj1, suburbObj2) =>
      suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) -
      suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput)
    )
    .slice(0, 7)
    .map(suburbObj => suburbObj.suburb);

  // 'suggestions' will be an array of strings, e.g.:
  //   ['Mentone', 'Mill Park', 'Mordialloc']

  setTimeout(() => callback(null, suggestions), 300);
}

此示例中的复制-粘贴代码(可以工作)在我的项目中有一个错误:

代码语言:javascript
复制
Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components

如果我去掉前缀json!:

代码语言:javascript
复制
import suburbs from '../suburbs.json';

通过这种方式,我在编译时不会出错(导入完成)。然而,当我执行它时,我得到了错误:

代码语言:javascript
复制
Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function

如果我调试它,我可以看到suburbs是一个objectc,而不是一个数组,所以没有定义filter函数。

然而,在示例中注释的suggestions是一个数组。如果我像这样重写建议,一切都会正常工作:

代码语言:javascript
复制
  const suggestions = suburbs
  var suggestions = [ {
    'suburb': 'Abbeyard',
    'postcode': '3737'
  }, {
    'suburb': 'Abbotsford',
    'postcode': '3067'
  }, {
    'suburb': 'Aberfeldie',
    'postcode': '3040'
  } ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))

所以..。多棒的杰森!前缀在导入中做了什么?

为什么我不能把它放到我的代码中呢?一些巴别塔的配置?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33650399

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档