Question

所以我试图让我的React依赖于我的JSON文件。我在这里读过很多文章，但是我找不到任何东西，我可以理解和使用。我认为loading json data from local file into React JS是我最接近的，但我不确定如何将它应用到我的程序中。

预知识;我正在使用ES6到this setup。

我试图通过它将.React放在本地JSON文件的.map上，然后每次渲染一个div，那里有一个键。后来我也希望将一些JSON值设为<p></p>，但我还没有那么远。

我尝试关注the tutorial，它通过AJAX调用访问JSON文件，但无法使其在上述设置中正常工作 - 是的，我发现我无法做到在ES6中使用getInitialState。不管我尝试了什么，它一直给我一个解析错误或者找不到myFile.json。

所以我需要的是这样的东西

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

class theWholeThing extends React.Component {
 render() {
   <div className="container">
        return <makeDiv key={key} item={item}/>;
   </div>
    }
  }

class makeDiv extends React.Component {
    {data.levels.map(function (item, key) { //mapping through the key "levels" in json
       return <div className="itIsVisible"></div>;
    })}
}

因此，每当有＆＃34;等级＆＃34;，lvl1，lvl2，lvl3中的等级时，应该有一个div。如果我在json中创建另一个级别，UI中应该有另一个div。

感谢任何建议或链接到其他文章。

我是React，json和AJAX调用的新手，而且一般都是低于中级（或略高于初学者）的程序员。

PS我不是想制作游戏，更多的是通过简单但直观的GUI获取信息的交互式方式。

Answer 1

您需要为webpack使用json加载程序：https://github.com/webpack/json-loader

const json = require('json!./myFile.json');

修改：实际上你应该能够做const json = require('./myFile.json');

但是，这不是一个AJAX请求，它会将文件构建到您的应用程序中。

要获取json脚本，您可以使用类似：https://github.com/github/fetch

的内容

fetch('/myFile.json')
  .then(response => {
    return response.json()
  }).then(data => {
    this.setState({ levels: data.levels });
  }).catch(ex => {
    console.log('parsing failed', ex)
  })

您还可以在构造函数中设置组件的初始状态：

constructor(props) {
   super(props)
   this.state = { ... }
}

Answer 2

这是带有ajax的get json部分。从server.js开始。

＆＃13;

'use strict';

let bodyParser = require('body-parser');
let express = require('express');
let favicon = require('serve-favicon');

let path = require('path');
let port = Number(3500);

let routes = require('./routes');

let app = express();
let server = app.listen(port);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.use('/', express.static('ui-dist'));
app.use('/routes', routes);

app.use(favicon(path.join(__dirname, '..', 'ui-dist', 'img', 'favicon.ico')));
app.get('/', function(req, res){ res.sendfile(__dirname + '/index.html', [], null); });

＆＃13;

＆＃13; 路线。

＆＃13;

'use strict';

let express = require('express');
let router = express.Router();

let getSetData = require('./routes/getsetdata');

router.get('/getData', function(req, res) {
  let getDataDone = function(data){ res.send(data); };
  getSetData.getData(getDataDone);
});

router.post('/setData', function(req, res) {
  let setDataDone = function(data){ res.send(data); };
  console.log(req.body);
  getSetData.setData(req.body, setDataDone);
});

module.exports = router;

＆＃13;

getSetData。

＆＃13;

'use strict';

var fs = require('fs');

var rootDataPath = './data';

var getData = function(doneCallBack) {
  var filePath = rootDataPath + '/basic.json';
  var jsonReadCallBack = function(err, data){
    if (err) doneCallBack('Data readFile error ' + filePath);
    else {
      var jsonData = JSON.parse(data.toString());
      doneCallBack(jsonData);
    }
  };
  fs.readFile(filePath, jsonReadCallBack);
};

var setData = function(data, doneCallBack) {
  var filePath = rootDataPath + '/basic.json';
  var writeFileCallBack = function (err) {
    if (err) console.log('error saving Data.json file ');
    doneCallBack('ok');
  };
  fs.writeFile(filePath, JSON.stringify(data, null, 2), writeFileCallBack);
};

module.exports.getData = getData;
module.exports.setData = setData;

＆＃13;

ajax.api。

＆＃13;

import request from 'superagent';

import apiActions from '../actions/api.Actions';
import saActions from '../actions/sa.Actions';

module.exports = {
  getData() { request.get('/routes/getData').end((err, res) => { this.gotData(res.body); }); },
  gotData(data) { saActions.gotData1(data); saActions.gotData2(data); saActions.gotData3(data); },
  setData(data) { request.post('/routes/setData').send(data).end((err, res) => { apiActions.apiInitDone(); }) },
};

＆＃13;

api.store。

＆＃13;

import Reflux from 'reflux';

import Actions from '../actions/api.Actions';
import ApiFct from '../utils/sa.api';

let ApiStoreObject = {
  newData: {
    "React version": "0.14",
    "Project": "ReFluxSuperAgent",
    "currentDateTime": new Date().toLocaleString()
  },
  listenables: Actions,
  apiInit() { ApiFct.setData(this.newData); },
  apiInitDone() { ApiFct.getData(); },
  apiSetData(data) { ApiFct.setData(data); }
}
const ApiStore = Reflux.createStore(ApiStoreObject);
export default ApiStore;

＆＃13;

data.store。

＆＃13;

import Reflux from 'reflux';

import Actions from '../actions/sa.Actions';
import AddonStore from './Addon.Store';
import MixinStoreObject from './Mixin.Store';

function _GotData(data) { this.data1 = data; BasicStore.trigger('data1'); }

let BasicStoreObject = {
  init() { this.listenTo(AddonStore, this.onAddonTrigger); },
  data1: {},
  listenables: Actions,
  mixins: [MixinStoreObject],
  onGotData1: _GotData,
  onAddonTrigger() { BasicStore.trigger('data2'); },
  getData1() { return this.data1; },
  getData2() { return AddonStore.data2; },
  getData3() { return this.data3; }
}
const BasicStore = Reflux.createStore(BasicStoreObject);
export default BasicStore;

＆＃13;

组件。

＆＃13;

import React from 'react';

import BasicStore from '../stores/Basic.Store';

let AppCtrlSty = {
  height: '100%',
  padding: '0 10px 0 0'
}

const getState = () => {
  return {
    Data1: BasicStore.getData1(),
    Data2: BasicStore.getData2(),
    Data3: BasicStore.getData3()
  };
};

class AppCtrlRender extends React.Component {
   render() {
    let data1 = JSON.stringify(this.state.Data1, null, 2);
    let data2 = JSON.stringify(this.state.Data2, null, 2);
    let data3 = JSON.stringify(this.state.Data3, null, 2);
    return (
      <div id='AppCtrlSty' style={AppCtrlSty}>
        React 1.4 ReFlux with SuperAgent<br/><br/>
        Data1: {data1}<br/><br/>
        Data2: {data2}<br/><br/>
        Data3: {data3}<br/><br/>
      </div>
    );
  }
}

export default class AppCtrl extends AppCtrlRender {
  constructor() {
    super();
    this.state = getState();
  }

  componentDidMount() { this.unsubscribe = BasicStore.listen(this.storeDidChange.bind(this)); }
  componentWillUnmount() { this.unsubscribe(); }
  storeDidChange(id) {
    switch (id) {
      case 'data1': this.setState({Data1: BasicStore.getData1()}); break;
      case 'data2': this.setState({Data2: BasicStore.getData2()}); break;
      case 'data3': this.setState({Data3: BasicStore.getData3()}); break;
      default: this.setState(getState());
    }
  }
}

＆＃13;

app.js。

＆＃13;

'use strict';

import React  from 'react';
import ReactDom  from 'react-dom';

import AppCtrl from './components/app.ctrl.js';
import Actions from './actions/api.Actions';
import ApiStore from './stores/Api.Store';

window.ReactDom = ReactDom;

Actions.apiInit();

ReactDom.render( <AppCtrl />, document.getElementById('react') );

＆＃13;

来自https://github.com/calitek/ReactPatterns React.14 / ReFluxSuperAgent。

在React中操作JSON

2 个答案: