map関数in react（エラー：TypeError：e.mapは関数ではありません）

Question

私は小道具からアイテムをレンダリングしたいのですが、初期状態ではできますが、サーバからの応答ではできません。私はこの間違いを得る

const { data } = this.props; 
    return (
     <div > 
      {data.map((item, index) => 
       <div key={index} className="row"> 
        <span data = { data } className="number col-4 col-md-8">{item._id}</span> 
        <span data = { data } className="date col-4 col-md-2">{item.date}</span> 
        <span data = { data } className="tag col-4 col-md-2">{item.tag}</span> 
        <div className="col-md-12 "> 
        {item.text} 
        </div>     
       </div> 
     )} 
     </div> 
    ) 
    } 

：

TypeError: e.map is not a function

応答：オブジェクト{データ：アレイ（12）、状態：200、STATUSTEXT： "OK"、ヘッダ：オブジェクト、設定：My機能をレンダリングオブジェクト...}

Answer 1

応答が保留中の場合、デフォルト値dataを使用できます。この時点ではdataがJSXで

const { data = [] } = this.props; 

または使用条件を定義されていません。

render() { 
    if (!data || !data.length) return null; 
    ... 
} 

Answer 2

あなたの応答は単なる生の応答であるように見えます。

fetch(fromMySource).then(resp => resp.json()).then(data => doSomething(data)); 

あなたのデータ配列は、あなたに掲載レスポンスオブジェクトのように見えるように思われる直接RESPを使用しようとするかもしれないように見えます：あなたがフェッチ使用している場合、これは約束チェーンがどのように見えるかです質問。

Answer 3

ちょうどあなたが、配列が存在していたかどうかを確認必要があるため、その後ステートメマップ機能

const { data } = this.props; 
    return (
     <div > 
      {data && data.lenght && data.map((item, index) => 
       <div key={index} className="row"> 
        <span data = { data } className="number col-4 col-md-8">{item._id}</span> 
        <span data = { data } className="date col-4 col-md-2">{item.date}</span> 
        <span data = { data } className="tag col-4 col-md-2">{item.tag}</span> 
        <div className="col-md-12 "> 
        {item.text} 
        </div>     
       </div> 
     )} 
     </div> 
    ) 
    } 

Answer 4

は、親コンポーネントの変更にこの変更しなければならなかった 、機能をマップあなたにこれらの単語を追加します。

に

this.setState({ 
    data: response 
    }) 

を

this.setState({ 
    data: response.data 
    }) 

私はチャイルドコンプonentですが、うまく動作しません（おそらくマップ機能のため）