组件在更新时消失

Question

我正在我的React Native应用程序中实现一个单词搜索工具.我有一个MobX商店wordStore.每个文本更改都会通过setFilter操作触发数据库查询.从控制台调试输出可以看出这一切都在幕后工作.

但是,WordList一旦触发任何更新,组件似乎就会消失,即如果我设置了一个默认的过滤字符串,它会显示列表中的匹配项,但是一旦任何文本更改它就会消失.

有什么我想念的吗？奇怪的是WordList.render()即使它不可见,该方法也会被执行.

编辑:渲染数组的.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>
      );

    }
    // ...
});

和WordList组件:

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>