2017-12-02 4 views
0
TypeError: undefined is not an object (evaluating 'this.props.data.map') 

appBodyDataではありません。は、オブジェクト

render(){ 

    let articles =this.props.data.map(function(articleData,index) { 
     return (
     <Card> 
     <CardItem> 
      <Body> 
      <Text> 
      {articleData.address.city} 
      </Text> 
      </Body> 
     </CardItem> 
     </Card> 

    ) 
    }); 
    return (
     <Content> 
      {articles} 
     </Content> 
    ); 
    } 

**[appBody:][1]** 

getData(){ 
    return fetch("https://jsonplaceholder.typicode.com/users") 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    this.setState({data:responseJson.array}); 
    }) 
    .catch((error) => { 
     console.error(error); 
    }); 


    } 
    componentDidMount(){ 
    this.getData(); 
    } 
    render() { 
    return (
     <AppBodyData data={this.state.data}/> 
    ); 

}

私はエミュレータで実行をしようとしていた場合、このエラーが表示されます。 このエラーを修正する方法を教えてください。 マップ機能がデータを取得できないようです。あなたのフェッチは最初this.props.dataが未定義のレンダリング時には、非同期であるため、23

答えて

0

:50 SDKのバージョン: は、ネイティブのCLIバージョンを反応させます。

constructor(props) { 
    super(props); 
    this.state = { 
     data: [] 
    } 
    } 

、その後の状態に

let articles =this.state.data.map(function(articleData,index) { 
を変更:フェッチの結果は小道具最初のコンストラクタでinital状態を設定

を状態にない設定されているので

はまた、あなたはthis.state.dataを使用する必要があります

0

fetchメソッドのためにヌル値を取得しています。データを取得するのに時間がかかります。その場合はレンダリングします。

render(){ 
    return (
     <Content> 
     {this.props.data?this.props.data.map((articleData,index)=>{ 
      return <Card> 
      <CardItem> 
       <Body> 
       <Text> 
       {articleData.address.city} 
       </Text> 
       </Body> 
      </CardItem> 
      </Card>   
      }):null}  
     </Content> 
    ); 
    } 
関連する問題