如何在状态改变后立即更新FlatList？

Question

我正在使用react native。

我使用以下命令列出了组件

并且，当状态给出数据更新列表时会发生变化。它不会立即更新。重新渲染需要几秒钟时间。

那么，如何才能立即更新组件呢？

//Listcomponent

const ListGlossary = ({glossaries, onPressGlossary, navigation, searchField}) => {

  return (

 <FlatList
          data={glossaries}
          keyExtractor={(item) => item.key}
          renderItem={({item}) => 
            <TouchableHighlight 
              onPress = {() => navigation.navigate('DetailGlossaryScreen', { searchField: searchField, word: item.word, translate: item.translate})}>
            <ListItem
              key={`${item.key}`} 
              title={`${item.word}`}
            />
            </TouchableHighlight>
          }
        />
}

//您可以在此处找到主屏幕组件

class HomeScreen extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      isLoading: true, 
      glossaries: [],
      searchField: '',
    }   
  }
   componentDidMount () {
Promise.resolve().then(() => {this.setState({glossaries: JSONDataFromFile, isLoading: false})})

}
onSearchChange = (inputText) => {
    this.setState({searchField: inputText});
  }
render(){
  return(

let filteredWords = []
if(this.state.searchField != null) {

    let searchField = this.state.searchField.toLowerCase(),
    glossaries = this.state.glossaries;               
    for(let i = 0, l = glossaries.length; i < l; ++i) {
        if(glossaries[i].word.toLowerCase().indexOf(searchField) === 0){
            filteredWords.push(glossaries[i]);
        }
    }
} 

{this.state.isLoading ?
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        :
          <ListGlossary 
            navigation = {this.props.navigation} 
            glossaries = {filteredWords}
            onPressGlossary={this.onPressGlossary}
            searchField = {this.state.searchField}
          />
        }
  )
}

Answer 1

请显示整个组件，并给出列表的长度。

-编辑

我怀疑你在渲染函数中做了太多的工作。您在每次调用它时都会进行过滤，而且由于您传入的是navigation属性(我假设您使用的是React-Navigation)，因此它将被频繁调用。如果您正在使用堆栈导航器，则每次您导航到新屏幕时，所有其他屏幕也会重新呈现。尽量避免传递navigation，或者使用即席组合来忽略它。

您可能不需要在用户每次更改搜索值时都过滤词汇表。使用shouldComponentUpdate生命周期方法。