javascript - React 功能基础道具未定义

Question

我需要你的帮助。

我有一个基于功能的组件调用 WelcomeSlidePage。我想将功能传递给功能组件。我尝试 console.log 功能组件中的功能，在第一个状态下，console.log 正在打印该功能，但在第二个状态之后，它变得未定义。

这是我调用功能组件的组件

WebViewPage.jsx

<Modal transparent={true} visible={this.state.WelcomeSlidePageModal} animationType="     
    <WelcomeSlidePage onDone={()=>{console.log('test bro');this.setState({WelcomeSlidePageModal:false})}}/>
</Modal>

这是我的功能组件

WelcomeSlidePage.jsx

  import React, { useState, useEffect } from 'react';
  import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
  import AppIntroSlider from 'react-native-app-intro-slider';
  import string from '../string'
  import { _storeData, _getData } from '../components/StoreAsync';

  export default WelcomeSlide = (props) => {
    const [language, setLanguage] =       useState('english');
    const [showRealApp, setShowRealApp] = useState(false);
    const welcomeSlide = string.welcome_slide[language]

    useEffect(() => { 
      console.log('testing bro',props.onDone)
      // getData();
    });
    async function getData() {
      setLanguage(    await _getData("language"));
      setShowRealApp( await _getData("showRealApp"));
    }

    _renderItem = ({ item }) => {
      switch (item.key) {
        case ('k4'):
          return (
            <View style={{backgroundColor : '#a0c83a', flex: 1}}>
              <Text style={styles.title}>{item.title}</Text>
              <View style={{justifyContent: 'center', paddingHorizontal: 20, flex: 1}}>
                <Text style={styles.text}>{item.text_4_a}</Text>
                <View style={{flexDirection: 'row'}}>
                  <Image style={styles.icon} source={item.icon} />
                  <Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_b}</Text>
                </View>

                <Text style={styles.text}>{item.text_4_c}</Text>
                <View style={{flexDirection: 'row'}}>
                  <Image style={styles.icon} source={item.icon} />
                  <Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_d}</Text>
                </View>
              </View>
            </View>
            );
        case ('k5'):
            return (
              <View style={styles.slide}>
                <Text style={styles.title}>{item.text_5}</Text>
                <TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].login_url }); }}>
                  <Text style={styles.button}>{item.text_5_btn1}</Text>
                </TouchableOpacity>
                <TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].register_url }); }}>
                  <Text style={styles.button}>{item.text_5_btn2}</Text>
                </TouchableOpacity>
              </View>
            );
        default:
          return (
            <View style={styles.slide}>
              <Text style={styles.title}>{item.title}</Text>
              <Image style={styles.image} source={item.image} />
              <Text style={{paddingHorizontal: 20, ...styles.text}}>{item.text}</Text>
            </View>
          );
      }
    }

    _onDone = () => {
      setShowRealApp(true);

      _storeData('isPassSlide',true);
      props.navigation.navigate('WebView', { url: string.onboarding[language].login_url,splashScreen:false });
    }

    const slides = [
      {
        key:    'k1',
        title:  welcomeSlide.title,
        text:   welcomeSlide.a,
        image:  require('../images/my_library_card_white_notext_nopadding.png'),
        backgroundColor: '#a0c83a',
      },
      {
        key:    'k2',
        title:  welcomeSlide.title,
        text:   welcomeSlide.b,
        image:  require('../images/my_account_white_notext_nopadding.png'),
        backgroundColor: '#a0c83a',
      },
      {
        key:    'k3',
        title:  welcomeSlide.title,
        text:   welcomeSlide.c,
        image:  require('../images/library_catalog_white_notext_nopadding.png'),
        backgroundColor:'#a0c83a',
      },
      {
        key:      'k4',
        title:    welcomeSlide.title,
        text_4_a: welcomeSlide.d_a,
        text_4_b: welcomeSlide.d_b,
        text_4_c: welcomeSlide.d_c,
        text_4_d: welcomeSlide.d_d,
        icon:     require('../images/icon-hand-right.png'),
        backgroundColor: '#a0c83a',
      },
      {
        key:         'k5',
        text_5:      welcomeSlide.e,
        text_5_btn1: welcomeSlide.e_btn1,
        text_5_btn2: welcomeSlide.e_btn2,
        backgroundColor:'#a0c83a',
      },
    ];

    return(
      <AppIntroSlider
        renderItem={_renderItem}
        prevLabel={string.back[language]}
        nextLabel={string.next[language]}
        doneLabel={string.next[language]}
        showPrevButton={true}
        slides={slides}
        onDone={()=>props.onDone()}/>
    )
  }

  const styles = StyleSheet.create({
    slide : {
      flex: 1,
      paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
      paddingBottom: 80,
      backgroundColor : '#a0c83a',
      alignItems: 'center',
    },
    title: {
      fontSize: 24,
      color: '#fff',
      fontWeight: 'bold',
      textAlign: 'center',
      marginTop : 30,
    },
    text: {
      fontSize : 20,
      color: '#fff',
      textAlign: 'left',
    },
    image: {
      width: 200,
      height: 200,
      resizeMode: 'contain',
      flex:1,
    },
    icon: {
      top: 10,
      width: 25,
      height: 15,
      width: 25,
      marginTop: -3,
    },
    content: {
      paddingHorizontal: 20,
    },
    button: {
      borderRadius: 8,
      paddingVertical: 12,
      paddingHorizontal: 12,
      color: 'white',
      fontSize: 24,
      fontWeight: 'bold',
      textAlign: 'center',
      marginHorizontal: 40,
      backgroundColor: '#e46825',
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.8,
      shadowRadius: 2,
      elevation: 5,
    },
  });

然后这是控制台日志

testing bro function onDone() {
            console.log('test bro');

            _this2.setState({
              WelcomeSlidePageModal: false
            });
          } b11b05fa-4e76-41da-9d58-218edc178e45:157683:15
testing bro undefined

请帮帮我，谢谢