Компонент исчезает при обновлении
Я внедряю средство поиска слов в своем приложении React Native. У меня есть магазин MobX, wordStore
. Каждое изменение текста запускает запрос к базе данных с помощью действия setFilter
. Все это работает под капотом, как я могу видеть из вывода отладки консоли.
Однако компонент WordList
, кажется, исчезает, как только какие-либо обновления запускаются, то есть если я устанавливаю строку фильтра по умолчанию, она показывает соответствующие элементы в списке, но как только любой текст изменяется, он исчезает.
Есть ли что-нибудь, что я пропал? Самое странное, что метод 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;
1 ответ:
Это была глупая ошибка. Это было связано с тем, что
flex
не был установлен в содержащем представлении. Правильный код для приведенного выше примера:<View style={{flex:1}}> <TextInput style={styles.textInput} onChangeText={(filter) => wordStore.setFilter (filter)} value={wordStore.filter} /> <WordList {...this.props} /> </View>