React native警告：在现有状态转换期间无法更新

Question

获取此警告消息

警告：无法在现有状态转换期间（例如在render内更新）。渲染方法应该是props和state的纯函数。

import React, {useState} from 'react';
import {View,
    Text,
    Image,
    StyleSheet,
    StatusBar,
    SafeAreaView,} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import AppIntroSlider from 'react-native-app-intro-slider';

const data = [
    {
        title: 'Title 1',
        text: 'Description.\nSay something cool',
        image: require('../../assets/1.jpg'),
        bg: '#59b2ab',
    },
    {
        title: 'Title 2',
        text: 'Other cool stuff',
        image: require('../../assets/2.jpg'),
        bg: '#febe29',
    },
    {
        title: 'Rocket guy',
        text: "I'm already out of descriptions\n\nLorem ipsum bla bla bla",
        image: require('../../assets/3.jpg'),
        bg: '#22bcb5',
    },
];


const IntroScreen = (props) => {

    const [showApp, setShowApp] = useState(false)

    const renderItem = ({item}) => {
        return (
            <View
                style={{
                    flex: 1,
                    backgroundColor: item.bg,
                }}>
                <SafeAreaView style={styles.slide}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Image source={item.image} style={styles.image} />
                </SafeAreaView>
            </View>
        );
    };

    const keyExtractor = (item) => item.title;

    const renderNextButton = () => {
        return (
            <View style={styles.buttonCircle}>
                <Icon
                    name="md-arrow-round-forward"
                    color="rgba(255, 255, 255, .9)"
                    size={24}
                />
            </View>
        );
    };

    const renderDoneButton = () => {
        return (
            <View style={styles.buttonCircle}>
                <Icon name="md-checkmark" color="rgba(255, 255, 255, .9)" size={24} />
            </View>
        );
    };

    const onSkip = () => {
        setShowApp(true)
    }


    if (!showApp) {
        return(
            <View style={{flex: 1}}>
                <StatusBar translucent backgroundColor="transparent"/>
                <AppIntroSlider
                    keyExtractor={keyExtractor}
                    renderItem={renderItem}
                    bottomButton
                    showSkipButton
                    showPrevButton
                    data={data}
                    onSkip={() => setShowApp(true)}
                />
            </View>
        )
    } else {
        return (
            <View>
                {props.navigation.navigate('Auth')}
            </View>
        )

    }

}

const styles = StyleSheet.create({
    slide: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingBottom: 96, // Add padding to offset large buttons and pagination in bottom of page
    },
    image: {
        width: 320,
        height: 320,
        marginTop: 32,
    },
    title: {
        fontSize: 22,
        color: 'white',
        textAlign: 'center',
    },
    buttonCircle: {
        width: 44,
        height: 44,
        backgroundColor: 'rgba(0, 0, 0, .2)',
        borderRadius: 22,
        justifyContent: 'center',
        alignItems: 'center',
    },
});


export default IntroScreen

请有人告诉我。