无法使用jQuery和React.js加载data.json文件

Question

我必须先说我来自移动开发。我对网络开发很新，所以这可能是一个业余问题。

我正在使用create-react-app（使用Babel）构建react.js项目。我正在尝试按照教程，我应该在我的组件安装时导入* .json文件。我似乎无法访问我的数据，并且收到错误消息“filteredApts.map不是函数”。

以下是我的导入：

import React from 'react';
import './App.css';
import $ from 'jquery';

这是我的componentWillMount方法：

componentDidMount: function() {
    console.log($.get('./data.json', function(){}.bind(this))) //This seems to get an HTML Page returned!
    this.serverRequest = $.get('./data.json', function(result) {
      var tempApts = result;
      this.setState({
        myAppointments: tempApts
      }); //setState
    }.bind(this));
  },

我的渲染方法：

render: function() {

var filteredApts = this.state.myAppointments;
filteredApts = filteredApts.map(function(item, index) {
  return (<li className="pet-item media" key={index}>
            <div className="pet-info media-body">
              <div className="pet-head">
                <span className="pet-name">{this.state.myAppointments[index].petName}</span>
                <span className="apt-date pull right">{this.state.myAppointments[index].petName}</span>
              </div>
              <div className="owner-name"><span className="label-item">Owner:</span>
              {this.state.myAppointments[index].ownerName}</div>
              <div className="apt-notes">
              {this.state.myAppointments[index].aptNotes}</div>
            </div>
          </li>)
}.bind(this));
return (<div className="interface">
          <div className="item-list media-list">
           <ul className="item-list media-list"></ul>
              </div>
            </div>)
  } //render
}); //MainInterface

这是我的文件地图：

最后我的控制台记录：

是否有人能指出我可能做错了什么？

Answer 1

我建议改变这一行：

var filteredApts = this.state.myAppointments;

到这个

var filteredApts = this.state.myAppointments || [];

您使用异步数据提取，在呈现时它可能不是myAppointments。

Answer 2

看起来你的responseText是html。

Answer 3

我明白了。

首先，＆＃39; ./ data.json＆＃39;默认情况下指向公用文件夹。

其次，我在

中缺少{filteredApts}

return (<div className="interface">
               <ul className="item-list media-list">{filteredApts}</ul>
            </div>)

非常感谢所有人。