ListView rendert nur nach dem Warmladen

Question

Ich verwende Redux, der ListView ist abonniert, die Konsolenprotokollmeldung wird angezeigt, aber der Bildschirm wird erst nach einem Warmladen aktualisiert. Irgendeine Idee, warum die ListView die neue Todo nicht auf dem Bildschirm zeichnen würde?

render() { 
    var store = getStore(); 
    var todos = store.getState().todos; 
    var dataSource = this.dataSource.cloneWithRows(todos); 
    console.log("Rendering: ", jtodos); 
    return (
     <View> 
      <Text>Todos to do</Text> 
      <ListView 
      dataSource={dataSource} 
      renderRow={this.renderTodo} 
      style={styles.listView}/> 
     </View> 
    ); 
} 

Ich habe mich verändert auch den Code

renderTodo(todo) { 
    console.log("Render:", todo); 
    return (
     <View style={styles.container} key={todo.id}> 
      <View style={styles.details}> 
       <View style={styles.rightContainer}> 
       <Text style={styles.title}>{todo.text}</Text> 
       </View> 
      </View> 
     </View> 
    ); 
} 
render() { 
    var store = getStore(); 
    var todos = store.getState().todos; 
    console.log("Rendering: ", todos); 
    var dataSource = this.dataSource.cloneWithRows(todos); 
    return (
     <View> 
      <Text>Todos to do</Text> 
      {todos.map(this.renderTodo)} 
     </View> 
    ); 
} 

Die Konsolenprotokoll zeigt alle todos, darunter die neue, die erst nach einem heißen Reload-up wird zeigen ....

Warum zeigt der Bildschirm das Todo nicht an?

Rendering: [Object, Object, Object, Object, Object, Object, Object] 
Render: Object {text: "fghf", id: 1, completed: false} 
Render: Object {text: "fghfbhhg", id: 2, completed: false} 
Render: Object {text: "fghfbhhggfjg", id: 3, completed: false} 
Render: Object {text: "fghfbhhggfjg", id: 4, completed: false} 
Render: Object {text: "fghfbhhg", id: 5, completed: false} 
Render: Object {text: "fghfbhhgkkkk", id: 6, completed: false} 
Render: Object {text: "f", id: 7, completed: false} 

Keine von diesen auf dem Display bis zu einem heißen Nachladen angezeigt. Alle nach einem Warmladen hinzugefügten Dateien werden erst beim nächsten Warmladen angezeigt.

Answer 1

Ich habe mit react-native für etwa 3-4 Monate entwickelt und bin gerade in die Verwendung der listview. Ich glaube, Sie müssen den Status tatsächlich setzen, anstatt ihn einer Variablen zuzuordnen.

Versuchen Sie den folgenden Code, da ich nicht 100% sicher bin, ob es funktioniert oder nicht.

render() { 
    var store = getStore(); 
    var todos = store.getState().todos; 
    // You need to actually set the state! 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(todos), 
    }); 
    console.log("Rendering: ", jtodos); 
    return (
     <View> 
      <Text>Todos to do</Text> 
      <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderTodo} 
      style={styles.listView}/> 
     </View> 
    ); 
} 

bearbeiten

Stellen Sie den Zustand im Inneren componentWillReceiveProps oder dem entsprechenden Lebenszyklus Methode