Mam problem podczas wywoływania navigation.getParam z super konstruktora, zanim od razu skorzystam

export default class HomeBeranda extends Component {...}

Ale kiedy zmieniam na

class HomeBeranda extends Component {...}

I wywołaj na końcu kodu:

export default class App extends React.Component {
   render () {
     return <HomeBeranda />;
   }
} 

Zamiast tego pojawia się błąd TypeError: undefined nie jest obiektem (ocena „navigation.getParam)

Oto mój pełny kod:

import React, { Component } from 'react';
import { Text, View, Image, TextInput, StatusBar, TouchableOpacity, Alert, KeyboardAvoidingView, AsyncStorage, BackHandler, ImageBackground, ScrollView } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import Axios from 'axios';
import Icon from 'react-native-vector-icons/Ionicons';

class HomeBeranda extends Component {

  constructor(props) {
    super(props);

    this.state = {
      akun: '',
      namapendek: '',
      email: '',
      rupiah: '',
      transaksi: '',
    }

    const { navigation } = props;
    if (navigation.getParam('akun').length > 0) {
      this.state = {
        akun: navigation.getParam('akun'),
      }
      this._callApiInfo(navigation.getParam('akun'));
    } else {
      this._showData();
    }
  }

  _showData = async () => {
    try {
      const value = await AsyncStorage.getItem('akun');
      this.setState({
        akun: value,
      });
      this._callApiInfo(value);
    } catch (error) {
      Alert.alert(error);
    }
  };

  _callApiInfo(value) {
    const paramsDatac = new URLSearchParams();
    paramsDatac.append('akun', value);
    Axios.post('http://radarugi.com/rekber/info.php', paramsDatac)
    .then(function (response) {
      const arrayHasil = JSON.stringify(response);
      const arrayLagi = JSON.parse(arrayHasil);
      this.setState({
        namapendek: arrayLagi.data.namaPendek,
        transaksi: arrayLagi.data.transaksi,
        rupiah: arrayLagi.data.rupiah,
        email: arrayLagi.data.email,
      });
      AsyncStorage.setItem('namapendek', this.state.namapendek);
      AsyncStorage.setItem('transaksi', this.state.transaksi);
      AsyncStorage.setItem('rupiah', this.state.rupiah);
      AsyncStorage.setItem('email', this.state.email);
      //Alert.alert(value);
    }.bind(this))
  }

  componentDidMount() {
    this.backHandler = BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    this.backHandler.remove();
  }

  handleBackPress = () => {
    Alert.alert(
      'Keluar',
      'Apakah anda ingin keluar dari aplikasi?',
      [
        { text: 'Batal', onPress: () => console.log('Batal'), style: 'cancel' },
        { text: 'Ya', onPress: () => BackHandler.exitApp() },
      ],
      { cancelable: false });
    return true;
  }

  _fungsiSetAkun(data) {
    this.setState({
      akun: data,
    })
  }

  render() {
    return (
      <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
        <StatusBar backgroundColor="#EE2562" barStyle="light-content" />
        <View style={{ alignItems: 'center' }}>
          <View style={{ backgroundColor: 'white', height: 130, width: 320, borderRadius: 12, marginTop: 12, shadowColor: 'black', shadowRadius: 5, shadowOpacity: 0.7, elevation: 12 }}>
            <View style={{flex: 1}}>
              <Text style={{ fontFamily: 'BEBAS', fontSize: 40, marginLeft: 9, marginTop: 4 }}>Hai <Text style={{color: '#EE2562', fontFamily: 'BEBAS', fontSize: 40, marginLeft: 9, marginTop: 4}}>{this.state.namapendek}</Text></Text>
            </View>
            <View style={{flexDirection: 'row', flex: 1}}>
              <View style={{borderTopWidth: 1, borderRightWidth: 1, flex: 1, alignItems: 'center', justifyContent: 'center'}}>
                <Text style={{fontFamily: 'BEBAS', fontSize: 33, color: '#EE2562'}}>{this.state.rupiah}</Text>
              </View>
              <View style={{borderTopWidth: 1, flex: 1, justifyContent: 'center'}}>
                <Text style={{fontFamily: 'BEBAS', fontSize: 24, color: '#EE2562', textAlign: 'center'}}>{this.state.transaksi}</Text>
              </View>
            </View>
          </View>
        </View>
        <View style={{ backgroundColor: '#EE2562', height: 90, top: 0, right: 0, left: 0, position: 'absolute', }}>
        </View>
        <ScrollView>
        <TouchableOpacity>
          <View style={{backgroundColor: '#EE2562', marginTop: 45, height: 80, marginHorizontal: 20, borderRadius: 4, opacity: 1, shadowColor: 'black', shadowOpacity: 0.7, shadowRadius: 3, elevation: 8, justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{color: 'white', fontFamily: 'BEBAS', fontSize: 50, paddingLeft: 8}}>Bikin Rekber</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity>
          <View style={{backgroundColor: '#EE2562', marginTop: 25, height: 80, marginHorizontal: 20, borderRadius: 4, opacity: 1, shadowColor: 'black', shadowOpacity: 0.7, shadowRadius: 3, elevation: 8, justifyContent: 'center', alignItems: 'center'}}>
            <Text style={{color: 'white', fontFamily: 'BEBAS', fontSize: 50, paddingLeft: 8}}>Join Rekber</Text>
          </View>
        </TouchableOpacity>
        <View style={{backgroundColor: 'white', borderWidth: 1, borderRadius: 3, marginTop: 30, marginHorizontal: 20, height: 200}}>
          <ScrollView>
           <Text style={{textAlign: 'left', marginTop: 4, fontSize: 17, paddingLeft: 7, color: 'black'}}>
            Panduan Singkat:
           </Text>
           <Text style={{textAlign: 'left', marginTop: 4, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            1. Penjual menekan tombol "Bikin Rekber" untuk memulai Rekber (Perlu diingat, fitur ini khusus dipakai oleh pihak Penjual)
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            2. Isi semua kolom sesuai dengan apa yang akan ditransaksikan
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            3. Ketika keluar kode Rekber, salin kode tersebut dan kasih ke Pembeli (Rahasiakan kode tersebut dari orang lain)
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            4. Pembeli menekan tombol "Join Rekber" dan masukkan kode dari Penjual
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            5. Proses Rekber sudah dimulai, saatnya Pembeli transfer dana/uang sesuai dengan nominal yang diberikan ke rekening Rekber (pihak ketiga)
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            6. Ketika sudah melakukan transfer sesuai nominal ke rekening Rekber, maka pembeli harus menekan tombol "Sudah Bayar", sistem akan mendeteksi apakah dana/uang sudah masuk ke rekening Rekber atau belum
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            7. Ketika sistem telah memverifikasi transferan pembeli, maka Penjual akan diberi pemberitahuan untuk memberikan barang/akun (jualan nya) ke Pembeli
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            8. Setelah memberikan barang/akun (jualan nya) tersebut ke Pembeli, Penjual harus menekan tombol "Barang Dikirim"
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            9. Pembeli harus memastikan barang/akun yang diberi oleh Penjual sesuai dengan apa yang ia inginkan. Jika sudah sesuai, maka Pembeli harus menekan tombol "Barang Diterima"
           </Text>
           <Text style={{textAlign: 'left', marginTop: 1, fontSize: 15, paddingLeft: 7, color: 'black'}}>
            10. Setelah Pembeli menekan tombol "Barang Diterima", sistem kami akan mengirim dana/uang sesuai nominal ke rekening milik Penjual
           </Text>
          </ScrollView>
        </View>
        </ScrollView>
        <View style={{ backgroundColor: 'white', height: 60, bottom: 0, right: 0, left: 0, position: 'absolute', shadowColor: 'black', shadowRadius: 9, shadowOpacity: 0.7, elevation: 10, flexDirection: 'row'}}>
          <TouchableOpacity style={{flex:1}}>
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Icon name="md-home" size={40} color="#EE2562"/>
              <Text style={{fontFamily: "BEBAS", color: "#EE2562"}}>Home</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={{flex:1}}>
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Icon name="md-list-box" size={40} color="black"/>
              <Text style={{fontFamily: "BEBAS", color: "black"}}>History</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity style={{flex:1}}>
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Icon name="md-person" size={40} color="black"/>
              <Text style={{fontFamily: "BEBAS", color: "black"}}>Account</Text>
            </View>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    );
  }
}

export default class App extends React.Component {
  render() {
    return <HomeBeranda />;
  }
}

I to jest mój zrzut ekranu z błędami: Dowód:

0
Kurcaci213 17 grudzień 2019, 06:32
Cóż, oczekujesz navigation jako właściwości, ale kiedy renderujesz swój komponent w return <HomeBeranda />;, nie przekazujesz navigation jako właściwości
 – 
Gonzalo.-
17 grudzień 2019, 06:41
Jak to naprawić?
 – 
Kurcaci213
17 grudzień 2019, 06:45
Dobrze. musisz przekazać navigation do swojego komponentu <HomeBeranda />, ale... navigation nie jest zdefiniowany nigdzie w kodzie. Skąd pochodzi?
 – 
Gonzalo.-
17 grudzień 2019, 06:46
Na poprzednim ekranie mam taki kod: this.props.navigation.navigate ('HomeWelcome', {akun: this.state.akun}); więc kod wywołuje mój drugi ekran podczas wysyłania parametru "akun"
 – 
Kurcaci213
17 grudzień 2019, 06:50
 – 
Kurcaci213
17 grudzień 2019, 06:50

2 odpowiedzi

Jak zasugerował @Gonzalo, próbujesz uzyskać dostęp do prop, który nigdy nie jest przekazywany do Twojego komponentu. Widzę, że używasz React Navigation, zdecydowanie sugeruję śledzić ich doskonałe pozyskiwanie rozpoczęty przewodnik, który przeprowadzi Cię przez konfigurację Nawigatorów (który następnie przekaże właściwość navigation do Twoich komponentów).

0
emeraldsanto 17 grudzień 2019, 06:50
React Navigation opiera się na różnych nawigatorach, takich jak Stack, Tab i Switch. Musisz skonfigurować przepływ nawigacji w swojej aplikacji, aby móc przechodzić do różnych ekranów za pomocą rekwizytu navigation. Ci nawigatorzy zajmą się przekazywaniem go na Twoje ekrany.
 – 
emeraldsanto
17 grudzień 2019, 07:03

Spróbuj tego

  export default class App extends React.Component {
    render() {
       return <HomeBeranda {...this.props} />;
        }
      }

To ci pomoże.

-1
Nimesh Bhalani 17 grudzień 2019, 07:19