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

Posted 2023-02-22

【中文标题】如何将本地json文件获取到reactjs中的构造函数中

【英文标题】：How to fetch local json file into constructor in 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; 

【问题讨论】：

***.com/questions/31758081/…

【参考方案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;