如何将本地json文件获取到reactjs中的构造函数中答案

【问题标题】：How to fetch local json file into constructor in reactjs如何将本地json文件获取到reactjs中的构造函数中
【发布时间】：2019-01-08 22:49:46
【问题描述】：

我的 react 应用程序中有 data.json 文件，我想在我的 home.js 文件中使用该文件，该文件当前具有内部 json 值。

有什么方法可以将 data.json 文件调用到我的 this.state 构造函数中。

class Home extends Component {
  constructor ()
{
  super();
  this.state={
    data:[
      {
        rank:1,
        name:'Name one',
        agency:'agency one',
      },
      {
        rank:2,
        name:'Name Two',
        agency:'agency two',
      },
      {
        rank:3,
        name:'Name Three',
        agency:'agency three',
      }
    ]
  }
}



render() {
    return (
      <div>
        {
          this.state.data.map((value) =>
          <div>
            <span>{value.rank}</span>
            <span>{value.name}</span>
            <span>{value.agency}</span>
          </div>
          )
        } 
      </div>
    );
  }
}

export default Home;

【问题讨论】：

stackoverflow.com/questions/31758081/…

标签： reactjs

【解决方案1】：

您可以将其作为默认值导入，然后在您的状态下分配它。

import data from "./data.json";

class Home extends Component {
  constructor ()
{
  super();
  this.state={
    data,
  }
}



render() {
    return (
      <div>
        {
          this.state.data.map((value) =>
          <div>
            <span>{value.rank}</span>
            <span>{value.name}</span>
            <span>{value.agency}</span>
          </div>
          )
        } 
      </div>
    );
  }
}

export default Home;

【讨论】：

这里可能需要使用扩展运算符，例如this.state = { data: [ ... data ] }

【解决方案2】：

让我们考虑存储在同一目录中的 JSON 文件 temp.json。在constructor 上分配给data 状态

 this.state = {
      package: require("./temp.json")
 };

像往常一样使用。 this.state.data[0].rank 或地图。

例如https://codesandbox.io/s/92qpzoz4rw

【讨论】：

感谢 Revansiddh，回复。由于我是反应的绝对初学者，所以不知何故无法管理 require 方法。一旦我按照代码和框使用 package.json 似乎就可以工作，但是我使用 package: require("./json/data.json") 来自我的 json 文件夹的文件似乎出现了某种错误。但是现在根据 devserkan 建议的当前场景调整对我有用，我肯定会 100% 尝试这种 require 方法。只需一个查询，如果我对您建议的方法有任何疑问，您是否有空。

【解决方案3】：

你可以试试这个： 1. $ npm install load-json-file; 2. 你也可以在这里查看 load-json-file 的实现细节：https://github.com/sindresorhus/load-json-file

import loadJsonFile from 'load-json-file'
class Home extends Component {
  constructor ()
{
  super();
  this.state={data:''}

componentDidMount(){
loadJsonFile('data.json').then(json => {
    console.log(json);
    this.setState={data: json}
});

}


render() {
    return (
      <div>
        {
          this.state.data.map((value) =>
          <div>
            <span>{value.rank}</span>
            <span>{value.name}</span>
            <span>{value.agency}</span>
          </div>
          )
        } 
      </div>
    );
  }
}

export default Home;

【讨论】：