Question

我正在使用本地反应。

我使用

列出了组件

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

那么，如何才能更新组件

//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，或使用HOC组合来忽略它。

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

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

1 个答案: