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

Question

你好，谁会读到这篇文章！提前感谢任何帮助或进一步研究该主题的方向，因为我不确定我是否完全理解逻辑。

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

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 变量，然后该变量将用于创建6 个不同的按钮，其 innerHTML 由数组项的内容填充。

但是程序会抛出一个错误，指出 map 不是从 JSON 数组中导出的，为什么首先需要它？程序不应该只是简单地导入它并将其视为具有内置JS方法的标准数组，例如map和forEach

我尝试将文件作为 CSV 文件并使用 D3 导入，但是这会返回一个我不希望出现这种情况的承诺，因为我正在使用它加载 UI 和包含 @ 的文件987654327@ 不是特别大。使用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处理JSON文件，并与module.exports=、source code here、source code here连接， 所以 JSON 会像 js 一样

module.exports = [0,1,2]

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

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

Answer 2

是的，你是对的，JSON 数组在 JS 中应该被视为原生数组。这是。您不必更改 JSON。问题是import * 语法，不要使用它。而是：

     import buttonNames from '/localdirectory/buttonNames.json';

Webpack 会顺利导入。

Answer 3

纯 JSON 不支持数组。试试：

{
  0: "10A",
  1: "10B",
  2: "10C",
  3: "10D",
  4: "10E",
  5: "10F"
}

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

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

Answer 4

Working demo

Json 文件

{
  "data": ["10A", "10B", "10C", "10D", "10E", "10F"]
}

JSX

import React from "react";
import "./styles.css";
import { data } from "./myJson.json";

export default function App() {
  console.log(data);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {data.map(d => (
        <p>{d}</p>
      ))}
    </div>
  );
}