将本地文件中的 json 数据加载到 React JS 中

IT技术 javascript ajax json xmlhttprequest reactjs
2021-03-15 03:30:15

我有一个 React 组件，我想从文件中加载我的 JSON 数据。控制台日志当前不起作用，即使我将变量数据创建为全局

'use strict';

var React = require('react/addons');

// load in JSON data from file
var data;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "data.json", true);
oReq.send();

function reqListener(e) {
    data = JSON.parse(this.responseText);
}
console.log(data);

var List = React.createClass({
  getInitialState: function() {
    return {data: this.props.data};    
  },
  render: function() {
    var listItems = this.state.data.map(function(item) {
        var eachItem = item.works.work;        

        var photo = eachItem.map(function(url) {
            return (
                <td>{url.urls}</td> 
            )
        });
    });
    return <ul>{listItems}</ul>
  }
});

var redBubble = React.createClass({
    render: function() {
      return (
        <div>
          <List data={data}/>          
        </div>
      );
    }
  });

module.exports = redBubble;

理想情况下，我更愿意这样做，但它不起作用 - 它试图将“.js”添加到文件名的末尾。

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

任何关于最佳方式的建议，最好是“react”方式，将不胜感激！

6个回答

我试图做同样的事情，这对我有用（ES6/ES2015）：

import myData from './data.json';

我从本机响应线程上的这个答案中得到了解决方案：https : //stackoverflow.com/a/37781882/176002

请注意，这会将您的 JSON 编译到包中，从而无法热交换 JSON 文件。这对于很多用例来说可能没问题，但不适用于我的。
2021-04-20 03:30:15
为我工作。我正在使用汇总。之前有var data = import(‘./data.json’)which 导入了一个 Promise。将此更改为可以import data from ‘./data.json’直接访问导入的对象。
2021-04-24 03:30:15
此答案应标记为最准确的答案，但带有json-loader包示例
2021-05-02 03:30:15
如果您在 webpack 中使用此方法，则需要为导入的 json 文件使用 json-loader。
2021-05-08 03:30:15
谢谢！我一直在寻找一种在 JSX 中访问 json 数据的简单方法，这正是它！
2021-05-15 03:30:15

使文件可用于您的组件的最简单和最有效的方法是：

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

注意json!路径之前

除非您为此添加库，否则这将不起作用。因为默认情况下 React 不支持此功能。示例库：- npmjs.com/package/json-loader
2021-04-17 03:30:15
我相信最新的 Webpack 版本包括 json-loader，所以你不需要安装它或在你的配置文件中声明它。我会建议尝试只是import FILE_AS_VARIABLE from './file/location.json'
2021-04-23 03:30:15
请参阅此处的答案：stackoverflow.com/questions/43735486/...
2021-05-04 03:30:15
json-loader我相信，包含在较新的 Webpack 版本中，但您可能仍需要在 Webpack 配置中添加一些内容以使用该确切语法。对其进行一些研究。
2021-05-06 03:30:15
@agm1984 自 2015 年以来事情发生了变化，如果您提供完整的答案就好了。
2021-05-12 03:30:15

您正在打开一个异步连接，但您编写的代码就好像它是同步的一样。该reqListener回调函数将不会与你的代码同步执行（即前React.createClass），但你的整个段已运行后，才和响应已经从远程位置接收。

除非您处于零延迟量子纠缠连接上，否则在您的所有语句都运行之后这很好。例如，要记录接收到的数据，您将：

function reqListener(e) {
    data = JSON.parse(this.responseText);
    console.log(data);
}

我没有看到dataReact 组件中的使用，所以我只能从理论上提出这个建议：为什么不在回调中更新你的组件？

@Desmond 是的，状态可以工作，因为组件将在其状态更改时重新呈现。
2021-04-17 03:30:15
非常感谢约翰的帮助。我一直在研究如何在回调中更新组件，但运气不佳。跟国家有关系吗？我还是 React 的新手！我已经更新了代码以显示组件是如何工作的 - 你能告诉我如何在回调中传递数据吗？再次感谢！
2021-05-06 03:30:15
zero-latency quantum-entanglement connection 😂也许是时候发明这些了，这样人们就不必再学习异步了......
2021-05-06 03:30:15

如果您有几个 json 文件：

import data from 'sample.json';

如果您要动态加载众多 json 文件之一，则可能必须使用 afetch来代替：

fetch(`${fileName}.json`)
  .then(response => response.json())
  .then(data => console.log(data))
  1. 安装json-loader：
npm i json-loader --save
  1. data在src以下位置创建文件夹：
mkdir data

  1. 把你的文件放在那里。

  2. 加载您的文件：

var data = require('json!../data/yourfile.json');
无论如何，我可以使用 src 文件夹之外的 .json 文件吗？我正在为我的项目使用 create-react-app
2021-05-12 03:30:15
A 在不使用json!. 谢谢。
2021-05-15 03:30:15
其它你可能感兴趣的问题
上一篇如何使 jQuery 不舍入 .width() 返回的值？ 下一篇Vue.js：条件类样式绑定