Question

我正在尝试显示一个FlatList，当用户单击TextInput时，该列表最初是隐藏的，但是我收到一条错误消息，指出重新渲染的次数过多，请查看代码： / p>

const [state, setState] = useState ({
    ...
    showFlatList: false,
})

return (
    <ImageBackground source = {enterInfoBackGroundImage} style = {styles.container}>
        <SafeAreaView>
            <View style = {styles.backgroundArea}>

                <TextInput style = {styles.inputText} 
                    onFocus = {setState({showFlatList: true})}
                    autoCapitalize='characters'
                    placeholder = {'MAKE'}
                    placeholderTextColor = {'#B2B2B2'}
                    onChangeText = {text => setState({...state, companyName: text })}
                    value = {state.make}
                />

                {state.showFlatList && <FlatList
                    style = {styles.tableView}
                    data = {make}
                    keyExtractor = {(item) => item.id}
        
                    renderItem = {({ item }) => (
                        <TouchableOpacity style = {styles.tableViewItem} onPress = {() => {
                            console.log(item.make, item.id)
                        }}>
                
                            <Text style = {styles.searchBarText}>{item.make}</Text>
                        </TouchableOpacity>
                    )}
                />}
            </View>
        </SafeAreaView>
    </ImageBackground>
);

当我将{setState({showFlatList: true})}放在onFocus上时才出现此错误，但是当我将它放在TouchableOpacity内的onPress内时，它起作用了，任何反馈都是值得的！：）

Answer 1

问题在于您如何在setState的{{1}}属性上调用onFocus。

它应该看起来像这样：

TextInput

与处理<TextInput onFocus={() => { setState({showFlatList: true}); }} // ... />的{{1}}的方式相同。

在React Native中获得太多重新渲染错误

1 个答案: