Reactネイティブタイプエラー：this.props.data.mapは関数ではありません

Question

私は反応ネイティブで1ページのアプリケーションを作成しています。フェッチレスポンスをリストビューで表示したい。応答アレイにアクセスするために、私は、マップ・メソッドを使用していますが

は次のようにこの

{ 
    "responseHeader": { 
    "type": "314", 
    "status": "200", 
    "message": "Successfully found the profile" 
    }, 
    "neighbourProfile": [{ 
    "no_of_mutual_friends": "0", 
    "username": "Amith Issac", 
    }, 
    { 
    "no_of_mutual_friends": "0", 
    "username": "Liz", 
    }] 
} 

ここでmapメソッドを使用する方法

？そして、私のapp.jsのように私のサーバーを見てから上記error.The応答がありました私は何が間違っを

app.js

import React, { Component } from 'react'; 
import { ScrollView } from 'react-native'; 
import Neighbour from './src/components/Neighbour'; 

class App extends Component { 
    state = { neighbours: [] }; 
    componentWillMount(){ 
     const myArray = 
     {"requestHeader": 
     { 
      "personal_id": "122334", 
      "type":"314" 
     } 
     } 
     fetch(" https://xxxxx",{ 
      method: 'POST', 
      headers:{ 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
      }, 
      body: JSON.stringify(myArray) 
     }) 
     .then((response) => response.json()) 
     .then((responseData) =>this.setState({neighbours: responseData})); 

    } 
    renderNeighbour(){ 
     return this.state.neighbours.map(neighbours => 
     <Neighbour key ={neighbours.username} neighbours={neighbours}/> 
     ); 
    } 
    render() { 
    return (
     <ScrollView> 
     {this.renderNeighbour()} 
     </ScrollView> 
    ); 
    } 
} 
export default App; 

をやっていますか？

Answer 1

、あなたはそれを動作させるためにresponseData.neighbourProfileを使用する必要があります。

.then((responseData) =>this.setState({neighbours: responseData.neighbourProfile})); 

あなただけの応答データからアカウントにneighbourProfileを取るので。このようなマップの何かが..通常、我々はここから直接使用することはできませんしながら、

responseData = [ 
 
     { 
 
     "no_of_mutual_friends": "0", 
 
     "username": "Amith Issac", 
 
     }, 
 
     { 
 
     "no_of_mutual_friends": "0", 
 
     "username": "Liz", 
 
     } 
 
    ];

- ：

Answer 2

this answerによると、（Python辞書のような）JavaScript Objectをマップするには、次の手順を実行する必要があります。

Object.keys(someObject).map(function(item)... 
Object.keys(someObject).forEach(function(item)...; 

// ES way 
Object.keys(data).map(item => {...}); 
Object.keys(data).forEach(item => {...}); 

のみArray sがJavaScriptでmap方法を持っているからです。 Objectにはこのメソッドがありません。あなたのケースでは

Answer 3

responseDataが...このような

何かだけ配列でなければなりません。あなたが変数を代入して状態から値を取得すると良いでしょう。

renderNeighbour(){ 
 
     
 
     //this one 
 
     const { neighbours } = this.state; 
 
     
 
     //or this one 
 
     let neighbours = this.state.neighbours; 
 
     
 
     return neighbours.map((data) => 
 
     <Neighbour key={data.username} neighbours={neighbours} /> 
 
    ); 
 
     
 
    }