Adamski Adamski -3 years ago 43
Javascript Question

Component disappears on update

I am implementing a word search facility in my React Native app. I have a MobX store,

wordStore
. Each text change triggers a database query via the
setFilter
action. This all works under the hood as I can see from console debug output.

However, the
WordList
component seems to disappear as soon as any updates are triggered, i.e. if I set a default filter string it shows matching items in the list, but as soon as any text changes it disappears.

Is there anything I'm missing? The strange thing is the
WordList.render()
method is executed even though it is not visible.

EDIT: Rendering the array's
.toString()
method works fine from the containing component, but strangely iterating over the array also displays the same behaviour, disappearing on update.

The containing component:

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

}
// ...
});


and the WordList component:

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 Source

This was a silly mistake. It was due to the flex not being set in the containing view. The correct code for the above example:

    <View style={{flex:1}}>
      <TextInput
        style={styles.textInput}
        onChangeText={(filter) => wordStore.setFilter (filter)}
        value={wordStore.filter}
      />
      <WordList {...this.props} />
    </View>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download