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

我必须首先说，我来自移动发展。我对网络开发非常陌生，所以这可能是一个业余问题

我正在使用createreact应用程序（使用Babel）构建一个react.js项目。我试图遵循一个教程，当我的组件挂载时，我应该导入一个*.json文件。我似乎无法访问我的数据，并且出现了一个错误，提示“FilterAdapts.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

render:function（）{
var filteredApts=this.state.myappoints；
filteredApts=filteredApts.map（函数（项，索引）{
返回（

{this.state.MyAppoints[index].petName}
{this.state.MyAppoints[index].petName}
所有者：
{this.state.myAppoints[index].ownerName}
{this.state.myAppointments[index].aptNotes}
）
}.约束（这个）；
返回(

)
}//渲染
}); //主界面

这是我的文件地图：

最后是我的控制台日志：

---

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

我建议改变这一行：

var filteredApts = this.state.myAppointments;

对此

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

---

您使用异步数据获取，在呈现时，它可能还不是MyAppointment。

我建议更改此行：

var filteredApts = this.state.myAppointments;

对此

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

您使用异步数据获取，在呈现时，它可能还不是MyAppointment。

看起来您的responseText是html。

看起来您的responseText是html。

我找到了答案

首先，默认情况下，'./data.json'指向公用文件夹

其次，我在中缺少{FilterAdapts}

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

返回(
{FilterAdapts}
)

无论如何，谢谢大家。

我想出来了

首先，默认情况下，'./data.json'指向公用文件夹

其次，我在中缺少{FilterAdapts}

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

返回(
{FilterAdapts}
)

谢谢大家