Компонент исчезает при обновлении


Я внедряю средство поиска слов в своем приложении 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 7

1 ответ:

Это была глупая ошибка. Это было связано с тем, что flex не был установлен в содержащем представлении. Правильный код для приведенного выше примера:

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