React Native：ListView.DataSourceが更新されていません

Question

サーバからデータを取得した後にListView.DataSourceを更新しようとしていますが、それは起こっていません。私は2つのコンポーネントを持っています。 他のコンポーネントにListView.DataSourceを更新しようとしています。ここに私のコードです。

index.android.js

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

import OtherComponent from './Components/OtherComponent' 

class MyApp extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     movies: [{title: 'ABCD'},{title: 'EFGH'}] 
     }; 
    } 

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

    render() { 
    return (
     <View> 
      <Button 
      onPress={this.getTopics} 
      title="Get Topics" 
      color="#841584" 
      accessibilityLabel="Learn more about this purple button" /> 
      <OtherComponent movies = {this.state.movies} /> 
     </View> 
    ); 
    } 
} 

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

OtheComponent.jsあなたのコードで

import React, { Component } from 'react' 
import { 
    View, 
    ListView, 
    Text, 
    StyleSheet, 
    Button 
} from 'react-native' 

export default class FormativeRevisionList extends Component{ 
    constructor(props) { 
     super(props); 
     const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
     this.state = { 
      dataSource: ds.cloneWithRows(props.movies) 
     } 
    } 

    render(){ 
     return (
      <View> 
      <ListView 
       style = {styles.listContainer} 
       dataSource = {this.state.dataSource} 
       renderRow = { 
        (rowData) => (
        <View> 
         <Text style = {styles.listItem}> 
         {rowData.title} 
         </Text> 
        </View> 
        ) 
      }/> 
      </View> 
     ) 
    } 
} 

const styles = StyleSheet.create ({ 
    listContainer: { 
     paddingTop: 22 
    }, 
    listItem: { 
     fontSize: 30, 
     fontWeight: 'bold', 
     textAlign: 'center', 
    } 
}) 

Answer 1

、あなただけのFormativeRevisionListのcontructorであなたのdataSourceを設定すると、この平均FormativeRevisionListにのみ与えられた映画をレンダリングします最初にレンダリングします。新しいリストをレンダリングするために

あなたがトピックボタンを取得押した後、あなたはそれが新しい小道具を受信したときに、これはあなたがcomponentWillReceivePropsの詳細を読むことができFormativeRevisionList componentWillReceiveProps

componentWillReceiveProps(nextProps) { 
    if (nextProps.movies !== this.props.movies) { 
     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(nextProps.movies) 
     }) 
    } 
    } 

でそれを設定することによって達成することができ、再びdataSourceを設定する必要があります〜からhere