ListViewはホットリロード後レンダリングします

Question

私はreduxを使用していますが、ListViewは購読されていますが、コンソールログメッセージは表示されますが、ホットリロード後に画面は更新されません。 ListViewが新しいTodoをスクリーンに描画しない理由は何ですか？

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

私もコンソールログがホットリロード後まで表示されません新しいものを含むすべてのドスを示し

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

にコードを変更しました....

画面に表示されないのはなぜですか？

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} 

ホットリロードするまで表示されません。ホットリロード後に追加されたものは、次のホットリロードまで表示されません。

Answer 1

私はreact-nativeで約3〜4ヶ月間開発しており、ちょうどlistviewを使っています。状態に変数を代入するのではなく、実際に状態を設定しなければならないと思います。

以下のコードを試してみてください。動作するかどうかわからないので、100％確実ではありません。

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

編集

componentWillReceivePropsまたは適切な内部状態はライフ・サイクル・メソッド