채우기의 ListView에서 웹 서비스에

Question

나는이 조각을 기본 반작용 반응 네이티브 코드 :

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    ToolbarAndroid, 
    ListView, 
    Text, 
    View 
} from 'react-native'; 

let styles = require('./styles/styles'); 

class Sunshine extends Component { 

    constructor(props) { 
    super(props); 
     this.state = {isLoading: true, jsonData: ''} 

    } 
    componentDidMount() { 
    this.setState({jsonData: this.getMoviesFromApiAsync()}) 
    } 
    render() { 
    if(this.state.isLoading != true) { 
     return (
     <View style={styles.container}> 
     <ToolbarAndroid 
     style={styles.baseToolbar} 
     logo={require('./ic_launcher.png')} 
     title="Sunshine" 
     titleTextColor="red"/> 
     <View style={styles.viewcontainer}> 
     <Text>{this.state.jsonData.city.id}</Text> 
     <ListView 
      dataSource={this.state.jsonData.list} 
      renderRow={(rowData) => <Text>{rowData.dt}</Text>} 
     /> 
     </View> 
     </View> 
    ); 
    } else { 
     return (
     <View style={styles.container}> 
     <ToolbarAndroid 
     style={styles.baseToolbar} 
     logo={require('./ic_launcher.png')} 
     title="Sunshine" 
     titleTextColor="red"/> 
     <View style={styles.singleviewcontainer}> 
     <Text>Loading...</Text> 
     </View> 
     </View> 
    ); 
    } 

    } 

    getMoviesFromApiAsync() { 
     return fetch('http://api.openweathermap.org/data/2.5/forecast/daily?q=94043&mode=json&units=metric&cnt=14&APPID=18dcba27e5bca83fe4ec6b8fbeed7827') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
      this.setState({isLoading: false, jsonData: responseJson}); 
      console.log(responseJson); 
      return responseJson; 
     }) 
     .catch((error) => { 
      console.error(error); 
     }); 
    } 

} 

AppRegistry.registerComponent('Sunshine',() => Sunshine); 

내가 그것을 어떻게해야한다고 생각하는 것은 답이 서버에서 도착했을 때, 목록이 그것의로 채워져 있다는 것입니다 결과. 그러나 그 일은 일어나지 않습니다. Intead이 오류가 발생합니다 :

undefined is not an object (evaluating 'allRowIDs.length') 

그래서 내가 정확히 여기서 잘못하고 있습니까?

Answer 1

데이터 목록을 사용하여 ListViewDataSource을 만들어야합니다.

constructor (props) { 
    super(props) 
    this.dataSource = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 !== r2 
    }) 
} 

componentDidMount() { 
    // You don't need to assign the return value to the state 
    this.getMoviesFromApiAsync() 
} 

render() { 
    // Use the dataSource 
    const rows = this.dataSource.cloneWithRows(this.state.jsonData.list || []) 
    ... 
    return (
    ... 
    <ListView 
     dataSource={rows} 
    /> 
) 
} 

전체 문서 here.