2016-09-25 4 views
0

私はES6で反応し、Facebookのチュートリアルで基本的な例を扱っています。私は正常に(私がアプリケーションに提供するためにLux Frameworkを用いた小型JSON APIを建て)一緒にすべてを入れている、しかし、1つのエラーに実行しています:私のデータがされていないので、私はこれが起こっている知っているUncaught TypeError:this.props.data.mapは関数ではありません - React CommentBoxチュートリアル(ES6を使用)

Uncaught TypeError: this.props.data.map is not a function

loadCommentsFromServer()に正しく取り込まれましたが、なぜその理由が分かりません。正しい方向へのプッシュや、私がやっていることが間違っている理由についての説明を期待していました。

ファイル全体を含めると、SOのマークダウンがフォーマットに奇妙なので、私はファイルに要点を示しました。

gist - App.js

gist - JSON being passed

+0

成功したかどうかチェックしたいかもしれません。(data)=> {this.setState({data:data}); }、 'そのデータは実際には配列であり、おそらく' JSON.parse'をその上に呼び出します。それ以外の場合は、エラーを起こさないデフォルト状態を定義しており、正常に表示されます。 –

+0

@ erik-sn - もう少し近づいた。 JSON APIの書式設定のために、 'this:コンテキスト:this '、' this.setState({data:data.data})'を使用してajax呼び出しに 'this'のコンテキストで渡す必要がありました。新しいエラーを今すぐ打つが、進歩する:) –

答えて

0

この問題はbecuase、私は適切にデータをフェッチするときAJAX呼び出しにcontext: thisを渡すと、私はthis.setState({ data: data.data })と状態を設定するときdata属性にステップする必要があることはなかったということでしたフォーマットの詳細はJSON APIです。

私が見つけた追加の問題は、レンダリング時に<Comment />コンポーネントのユニークキーを渡していないということでした。

gist- Updated App.js

正しい方向に私を導くための@エリック-SNに感謝します。

関連する問題