Когда нужно сделать запрос Fetch для React Native Component

Question

Я новичок в React Native и смущен тем, как правильно использовать предоставленный API Fetch.

Сам вызов (как указано здесь: http://facebook.github.io/react-native/docs/network.html) прост, и я могу выйти из удачного ответа, но когда наступает время визуализации данных, оно не определено.

Я ожидал, что могу определить пустой массив «movies», а затем заменить его, вызвав «setState» из компонента componentDidMount(), который вызовет повторную визуализацию. Это предположение неверно?

В примере ниже результатов в следующей ошибке:

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

Заранее спасибо за любую помощь!

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

class ReactNativePlayground extends Component { 

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

    componentDidMount() { 
     fetch('https://facebook.github.io/react-native/movies.json') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     this.setState({ 
      movies: responseJson.movies 
     }) 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
     return (
     <View> 
      <Text>test</Text> 
      <ListView 
       dataSource={this.state.movies} 
       renderRow={(row) => <Text>{row.title}</Text>} 
      /> 
     </View> 
    ) 
    } 
} 

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

Answer 1

Это потому, что вам необходимо поместить данные в ListView.DataSource:

constructor (props) { 
    super(props); 

    const ds = new ListView.DataSource({ 
    rowHasChanged: (a, b) => a !== b 
    }) 

    this.state = { 
    movies: ds.cloneWithRows([]) 
    } 
} 

// Inside the response JSON: 

this.setState({ 
    movies: this.state.movies.cloneWithRows(responseJson.movies) 
}); 

React Native ListView docs демонстрируют этот вид установки. Использование источника данных позволяет оптимизировать процесс рендеринга списков данных (например, обратите внимание на функцию rowHasChanged, что предотвращает ненужную повторную визуализацию строки, когда данные не были изменены.