在本机反应中获得太多重新渲染错误

Question

我试图显示一个 FlatList，它最初是隐藏的，当用户点击一个 TextInput 时，但我收到一个错误，说有太多的重新渲染，看看代码：

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

问题是如何在TextInput的onFocus属性上调用setState 。

它应该看起来更像这样：

<TextInput
  onFocus={() => {
    setState({showFlatList: true});
  }}
  // ...
/>

因此，与您处理TouchableOpacity的onPress的方式相同。