何時對React Native Component進行Fetch調用

我是React Native的新手，對如何正確使用提供的Fetch API感到困惑。何時對React Native Component進行Fetch調用

調用本身（如此處所述：http://facebook.github.io/react-native/docs/network.html）很簡單，我可以註銷一個成功的響應，但是當它呈現數據時，它是未定義的。

我希望我可以定義一個空的'電影'數組，然後通過調用componentDidMount（）中的'setState'來替換它，這會觸發重新渲染。這個假設是不正確的？

以下結果的代碼示例中出現以下錯誤：

'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);

來源

2016-11-21 Zach Thornton

嘗試記錄'this.state.movies ''在你的'render'方法的'return'語句之前查看是否記錄一個數組或者一個對象 –

那是因爲你需要將數據放置到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函數 - 這樣可以防止在數據未更改時不必重新渲染一行）

來源

2016-11-21 19:04:55

你是一個聖人我曾經使用過DataSource，但沒有找到可行的解決方案。使用上面的語法是我錯過了，謝謝！ –

何時對React Native Component進行Fetch調用

回答

相關問題