更新時にコンポーネントが消える

Question

私はReact Nativeアプリで単語検索機能を実装しています。私はMobXストアwordStoreを持っています。各テキストの変更は、setFilterアクションを介してデータベースクエリをトリガします。コンソールのデバッグ出力から見ることができるように、これはすべてフードの下で動作します。

しかし、更新がトリガーされるとすぐにコンポーネントが消えるようになります。つまり、デフォルトのフィルタ文字列を設定すると、一致するアイテムがリストに表示されますが、テキストが変更されるとすぐに消えます。

紛失しているものはありますか？奇妙なことに、WordList.render()メソッドが表示されていなくても実行されるということです。

EDIT：は、アレイの.toString()方法をレンダリングが含有する成分から正常に動作しますが、配列の上に不思議な反復処理も、更新時に消えて、同じ動作を表示します。

含有成分：

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

    } 
    // ... 
}); 

およびワードリストの成分：

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

これは愚かな間違いでした。含まれているビューにflexが設定されていないためでした。上記の例の正しいコード：

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