ES6 有没有办法读取本地 JSON 数组？

Question

向所有可能读到这篇文章的人致敬！我想提前感谢任何帮助或指导进一步研究这个主题，因为我不确定我是否完全理解逻辑。

我正在创建一个 React 应用程序，它使用按钮组件，并从由名称组成的外部本地 JSON 数组获取它的 props。例如：

import React from 'react';
import * as buttonNames from '/localdirectory/buttonNames.json';

class Buttons extends React.Component {
    render() {
        return (
            {buttonNames.map((buttonName, i) => {
                return <button>{buttonName}</button>
            }}
        );
    }
}

JSON 数组如下所示：

[
"10A",
"10B",
"10C",
"10D",
"10E",
"10F"
]

这是我正在尝试做的事情的一个简化示例，但是从我的角度来看，预期结果是映射函数应该迭代 JSON 数组并将每个变量分配给变量，buttonName然后使用该变量通过innerHTML 创建 6 个不同的按钮由数组项的内容填充。

然而，程序会抛出一个错误，指出map未从 JSON 数组导出，为什么它需要放在第一位？程序不应该简单地导入它并将其视为具有内置 JS 方法（例如map和 ）的标准数组吗？forEach

我尝试过将文件作为 CSV 处理并使用 D3 导入，但是这会返回一个承诺，但我不希望出现这种情况，因为我正在使用它加载 UI 并且包含的​​文件不是buttonNames特别大的。使用JSON.parse()也不起作用，因为程序声明目标已经是一个对象。

感谢并接受任何建议！

Answer 1

这是关于你的进口声明。

在js中处理JSON文件时，就变成了导出数据的js。

[1,2,3]

和

import data from "./data.json"
console.log(data) // [1,2,3]

和

import * as data from "./data.json"
console.log(data) // {0:1,1:2,2:3, default:[1,2,3]}

因为它被视为 ES 模块，所以您导入一个对象而不是数组本身，因此 map 函数将是未定义的，因为它只是一个普通对象。

这就是为什么

Webpack 使用json-loader加载 JSON ，这是官方支持的，这样你就不需要自己配置，并且 json-loader 会通过 stringify 和 concat 来处理 JSON 文件module.exports=，源代码在这里，所以 JSON 将在 js 中喜欢

module.exports = [0,1,2]

并作为模块。导出对象本身将作为default导出导入到 ESM 文件中，并且所有对象字段都将导出为其他字段，因此您在执行操作时将获得一个 ESM 对象import * as data from "./data.json"

当然，如果您使用不同的 JSON 加载器，该值将会不同，但您会遇到错误。