Question

我遇到了这个问题，我有以下用户界面：

<View style={{flex:1}}>
  <TextInput
    onChangeText={(text) => this.doSearch(text)}/>
  <FlatList />
  <SearchResultList results={this.state.searchResults} />
</View>

SearchResultList如下：

class SearchResultList extends React.PureComponent {

    render() {
        return (
            this.props.results != null ? 
            <View style={styles.containerStyle}>
                <FlatList 
                    data={this.props.results}
                    renderItem={ ({item}) =>
                        <Text>{item.key}</Text>
                    }
                />
            </View>
            :
            null
        )
    }
}

const styles = StyleSheet.create({
    containerStyle: {
        position: 'absolute', 
        top: 155, 
        left: 0, 
        right: 0, 
        bottom: 0,
        backgroundColor: '#FFF'
    }
})

当我开始输入TextInput时，应用程序的doSearch会被适当调用，直到searchresults组件显示在屏幕上。一旦显示，onChangeText就会停止调用doSearch。

我在这里做错了什么想法？

更新：如果我将SearchResultList的位置更改为＆＃39; relative＆＃39;它运行正常...... onChangeText再次开始运行doSearch ...我还改变了组件，以便从React.Component而不是PureComponent扩展。那没有用。

Answer 1

在SearchResultList类中扩展React.Component而不是React.PureComponent，如果你需要处理不必要的渲染覆盖：

shouldComponentUpdate(nextProps){
    return this.props.results !== nextProps.results;
    }

Absolute View On Top时，不会调用TextInput的onChangeText

1 个答案: