在 react 组件中加载和显示 json 数据

Posted 2023-02-22

【中文标题】在 react 组件中加载和显示 json 数据

【英文标题】：Load and display json data in react component

【发布时间】：2016-12-11 14:43:38

【问题描述】：

我正在尝试从反应组件中的 json 文件加载数据。我正在我的 app.js 中尝试这个解决方案。

https://***.com/a/33141549/1937021

var data = require('json!../json/acordes.json');

“无法解析模块 JSON 错误”在终端中。

我在 app.js 文件中执行此操作。我的文件夹结构如下：

/src
  /js
    app.js
  /css
  /json
    acordes.json

我的其余代码如下所示：

https://gist.github.com/dabit3/651f2dae058ff99810eb771c2817d622

【问题讨论】：

你是如何构建你的包的？

【参考方案1】：

我可能弄错了，但是为了能够以这种方式要求 json，您必须使用 webpack 和 json-loader。

假设，你使用 webpack。安装json-loader：

npm install --save json-loader

并添加到 webpack 加载器：

//.. 
loaders: [
  test: /\.json$/, loader: "json", include: "path/to/your/sources"
]

【讨论】：

我这样做了，但现在我得到 'ERROR in ./~/json-loader!./src/json/acordes.json Module build failed: SyntaxError: Unexpected token m at Object.parse (native ) 在 Object.module.exports (/Users/alexanderlloyd/Documents/tocacuatro/node_modules/json-loader/index.js:7:48) @ ./src/js/App.js 66:11-47´

能否提供您的 json 文件？