Thành phần biến mất khi cập nhật

Question

Tôi đang triển khai một cơ sở tìm kiếm từ trong ứng dụng React Native. Tôi có một cửa hàng MobX, wordStore. Mỗi thay đổi văn bản sẽ kích hoạt truy vấn cơ sở dữ liệu thông qua hành động setFilter. Điều này tất cả các công trình theo mui xe như tôi có thể nhìn thấy từ giao diện điều khiển gỡ lỗi đầu ra.

Tuy nhiên, thành phần WordList dường như biến mất ngay khi mọi cập nhật được kích hoạt, tức là nếu tôi đặt chuỗi bộ lọc mặc định, nó sẽ hiển thị các mục phù hợp trong danh sách, nhưng ngay sau khi bất kỳ thay đổi văn bản nào biến mất.

Tôi có thiếu điều gì không? Điều kỳ lạ là phương pháp WordList.render() được thực hiện ngay cả khi nó không hiển thị.

EDIT: Rendering phương pháp của mảng .toString() hoạt động tốt từ các thành phần có chứa, nhưng kỳ lạ iterating qua mảng cũng hiển thị các hành vi tương tự, biến mất trên bản cập nhật.

Các thành phần chứa:

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

    } 
    // ... 
}); 

và thành phần 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

Đây là một sai lầm ngớ ngẩn. Đó là do flex không được đặt trong chế độ xem có chứa. Mã đúng cho ví dụ trên:

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