javascript - Component disappears on update - Stack Overflow

admin管理员组

文章数量:1332352

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 ponent 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 ponent, but strangely iterating over the array also displays the same behaviour, disappearing on update.

The containing ponent:

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 ponent:

const WordList = observer(class WordList extends Component {

  constructor(props) {
    super(props);
    this.dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    })
  }

  ponentWillReact() {
    console.log("I will re-render, since the words have changed!");
  }

  ponentWillUpdate() {
    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;

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 ponent 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 ponent, but strangely iterating over the array also displays the same behaviour, disappearing on update.

The containing ponent:

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 ponent:

const WordList = observer(class WordList extends Component {

  constructor(props) {
    super(props);
    this.dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2
    })
  }

  ponentWillReact() {
    console.log("I will re-render, since the words have changed!");
  }

  ponentWillUpdate() {
    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;

• javascript
• react-native
• react-native-ios
• mobx
• mobx-react

Share Improve this question Follow edited Jun 12, 2017 at 10:49 Adamski asked Jun 10, 2017 at 12:14 AdamskiAdamski 3,70566 gold badges4343 silver badges7878 bronze badges 2

• What does the console window look like after starting the app, then changing the filter? Have you verified that getWords() is working as it should? – Glubus Commented Jun 12, 2017 at 13:15
• @Glubus yes it all works as it should, console output shows the updated results, and also the output of words.toString() in the containing ponent is updated as expected – Adamski Commented Jun 12, 2017 at 13:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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>

本文标签： javascriptComponent disappears on updateStack Overflow