Komponente verschwindet bei Aktualisierung

Question

Ich implementiere eine Wortsuchfunktion in meiner React Native App. Ich habe einen MobX Store, wordStore. Jede Textänderung löst über die Aktion setFilter eine Datenbankabfrage aus. Das alles funktioniert unter der Haube, wie ich von der Konsolen-Debug-Ausgabe sehen kann. Die Komponente WordList scheint zu verschwinden, sobald irgendwelche Aktualisierungen ausgelöst werden, d. H. Wenn ich eine Standardfilterzeichenfolge festlege, werden übereinstimmende Elemente in der Liste angezeigt, aber sobald sich ein Text ändert, verschwindet er.

Gibt es etwas, was ich vermisse? Das Seltsame ist, dass die Methode WordList.render() ausgeführt wird, obwohl sie nicht sichtbar ist.

EDIT: Rendern des .toString() Methode des Array arbeitet von der enthaltenden Komponente in Ordnung, aber seltsam Iterieren über das Array auch das gleiche Verhalten zeigt, auf Update verschwinden.

Die enthaltenden Komponente:

const WordSearch = observer(class WordSearch extends React.Component { 

    constructor(props) { 
     super(props); 
    } 


    render() { 
     let words = wordStore.getWords(); // For debugging 
     return (
     <View> 
      <TextInput 
      style={styles.textInput} 
      onChangeText={(filter) => wordStore.setFilter (filter)} 
      value={wordStore.filter} 
      /> 
      <Text>{words.toString()}</Text> <!-- This works --> 
      <View style={{flex:1}} key={wordStore.filter}> <!-- This disappears too --> 
      {words.map((word, i) => { 
      console.log ('word: '+word); 
      return <View style={{flex:1}} key={i}> 
       <Text>{word}</Text> 
      </View> 
      })} 
      </View> 
      <WordList {...this.props} /> 
     </View> 
    ); 

    } 
    // ... 
}); 

und der Wortbestandteil:

const WordList = observer(class WordList extends Component { 

    constructor(props) { 
    super(props); 
    this.dataSource = new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2 
    }) 
    } 

    componentWillReact() { 
    console.log("I will re-render, since the words have changed!"); 
    } 

    componentWillUpdate() { 
    console.log("Will update") 

    let words = wordStore.getWords(); 
    this.dataSource = this.dataSource.cloneWithRows(words); 
    console.log ("words:"); 
    console.log (words); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ListView 
      key={wordStore.words} 
      dataSource={this.dataSource} 
      renderRow={this.renderWordRow} 
      style={styles.listView} 
     /> 
     </View> 
    ) 
    } 

    renderWordRow = (word, sectionID, rowID) => { 
    console.log ('rendering word row: '+word) 
    return (
     <TouchableHighlight 
      underlayColor="grey"> 
      <View style={styles.rowContainer}> 
      <Text style={styles.title}>{word}</Text> 
      </View> 
     </TouchableHighlight> 
    );  
    } 
}); 

export default WordList; 

Answer 1

Das war ein dummer Fehler. Es wurde aufgrund der flex nicht in der enthaltenden Ansicht festgelegt. Der richtige Code für das obige Beispiel:

<View style={{flex:1}}> 
     <TextInput 
     style={styles.textInput} 
     onChangeText={(filter) => wordStore.setFilter (filter)} 
     value={wordStore.filter} 
     /> 
     <WordList {...this.props} /> 
    </View>