在Reactjs中加载本地jSON文件而不安装localserver

Question

我的结构是src / resource / file.json。

1.通过安装load-json并使用require：

    class App extends Component{  

      constructor(props) {
            super(props);
            this.state = {summaryData: [], sortBy: null};
            this.sortContent = this.sortContent.bind(this);
            }
         componentWillMount() {

            require('../resource/file.json')
                  .then(response => {
                    // Convert to JSON
                    return response;
                  })
                  .then(findresponse => {
                    // findresponse is an object
                    console.log(findresponse);
                    this.setState({summaryData: findresponse});
                  })
                  .catch(norespone => {
                    console.log('Im sorry but i could not fetch anything');
                  });
              }

并显示消息： 找不到模块：无法解析'C：\ Xampp \ htdocs \ path \中的'../resource/file.json'到\ app \ src \ pages'

1. 通过myJSON：

   request('https://api.myjson.com/bins/{id..}').then(sumres => {
     if (sumres) {
       this.setState({summaryData: sumres});
       console.log(this.state.summaryData);
     }
   });
   

   }

但控制台或网络选项卡中没有任何内容。罐头有人提出解决方案吗？ 是否可以在不安装本地服务器的情况下加载json文件？

Answer 1

是的！可以将JSON加载到您的页面中。在导入模块的脚本顶部，导入json文件。

示例：

import React from 'react';
import jsonData from '../resource/file.json';
etc...

在您的情况下，如果您尝试将其设置为状态，只需在组件初始化时设置状态。

constructor(props) {
    super(props);
    this.state = {
        summaryData: jsonData.myArray, 
        sortBy: null
    };

    this.sortContent = this.sortContent.bind(this);
}

希望这有帮助！