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

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但是当我将其放入onPressTouchableOpacity 内时，它起作用了，感谢任何形式的反馈！:)

标签： reactjsreact-nativereact-native-flatlist

Answer 1

问题是您如何调用setState.onFocusTextInput

它应该看起来更像这样：

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

所以你处理你TouchableOpacity的onPress.