React Native: ListView.DataSource wird nicht aktualisiert

Question

Ich versuche, ListView.DataSource nach dem Abrufen von Daten vom Server zu aktualisieren, aber es ist nicht passiert. Ich habe zwei Komponenten, eine wird in andere importiert. Von der Basiskomponente versuche ich ListView.DataSource in anderer Komponente zu aktualisieren. Hier ist mein Code.

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

in Ihrem Code Sie nur Ihre dataSource in contructor von FormativeRevisionList gesetzt, bedeutet dies FormativeRevisionList nur die gegebenen Filme machen, wenn deine erste render es.

Um neue Liste zu machen, nachdem Sie Themen-Taste drücken erhalten, müssen Sie die dataSource wieder einzustellen, wenn es neue Requisiten erhalten, kann dies durch Setzen erreichen sein in FormativeRevisionList componentWillReceiveProps

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

Sie können mehr über componentWillReceiveProps lesen von here