jQueryとReact.jsを使用してdata.jsonファイルを読み込めません

Question

私はまずモバイル開発から来ていると言わなければなりません。私はWeb開発で非常に新しいので、これはおそらくアマチュアの質問です。

私は、react-jsプロジェクトを作成しています（create-react-app（Babelを使用））。私はコンポーネントがマウントされたときに* .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

私は、この行を変更することをお勧めしたい：あなたは非同期データフェッチを使用して、それはまだmyAppointmentsになることはできませんレンダリングの瞬間にこの

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

に

var filteredApts = this.state.myAppointments; 

を。

Answer 2

あなたのresponseTextはhtmlです。

Answer 3

私はそれを理解しました。

最初に、 './data.json'がパブリックフォルダをデフォルトで指していました。

第二に、私はとにかくすべてに

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

おかげで{filteredAptsを}がありませんでした。