javascript - React Native で Stack Navigator を使用してパラメーターを渡すときに状態にアクセスする方法

Question

私は最初の React Native プロジェクトに取り組んでいます。これはマルチスクリーン アプリであり、画面の 1 つは親画面から渡すデータを必要とします。しかし問題は、子画面でデータを受け取り、画面の状態で値を保存しようとすると、アプリがクラッシュすることです。状態にアクセスするコードを削除するとすぐに、クラッシュしなくなります。コードは次のとおりです。

    renderRow(object) {  //Calling the second screen when the user touches
    const { navigate } = this.props.navigation;

    return(
      <TouchableOpacity onPress={() => navigate('ViewRecord', { key: object.key })}> //Sending the parameter
        <Image
          styleName="large-square"
          source={{ uri: object.record.image }} >

          <Text style={styles.designNumberHeading}>{object.record.designNumber}</Text>
        </Image>
      </TouchableOpacity>
    );
  }

子画面のコードは次のとおりです。

    'use-strict'

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  KeyboardAvoidingView,
  ScrollView,
  TouchableHighlight,
  Text,
  FlatList,
} from 'react-native';
import {
  Heading,
  Title,
  TextInput,
  Button,
  Image,
  NavigationBar,
  ListView,
  TouchableOpacity,
  Icon,
  Lightbox,
  Overlay,
} from '@shoutem/ui';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

import NavBar from '../components/NavBar.js';

import { firebaseApp } from '../config/firebase.js';

export default class ViewRecord extends Component{
  constructor(props) {
    super(props);

    this.state={
      designNumber: '',
      dates: [],
      quantity: 0,
      karigars: [],
      colour:'',
      amount: '',
      description: '',
      editMode: false,
    };

    this.updateStateAfterGettingData = this.updateStateAfterGettingData.bind(this);
  }

  getData() {
    const { params } = this.props.navigation.state;  //Accessing the parameters

    console.log('Key: ', params.key);

    let databaseRef = firebaseApp.database().ref(params.key);

    databaseRef.once('value', (snap) => {
      console.log('Inside Event Listener');

      this.updateStateAfterGettingData(snap);  //Setting the state. (The App crashes if this statement is executed)
    });
  }

  updateStateAfterGettingData(snap) {
    this.setState({
      designNumber: snap.val().designNumber,
      dates: snap.val().dates,
      quantity: snap.val().quantity,
      karigars: snap.val().karigars,
      colour: snap.val().colour,
      amount: snap.val().amount,
      materials: snap.val().materials,
      description: snap.val().description,
    });

    console.log(this.state);
  }

  render() {
    const { goBack } = this.props.navigation;

    this.getData();

    if (!this.state.editMode) {
      return(
        <View style={styles.container}>
          <NavBar title="View Record" hasHistory={true} goBack={() => goBack()}/>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
  },
})

StackNavigator のコードは次のとおりです。

import { StackNavigator } from 'react-navigation';

import CreateRecord from '../screens/CreateRecord.js';
import Records from '../screens/Records.js';
import ViewRecord from '../screens/ViewRecord.js';

export const Navigator = StackNavigator({
  Records: { screen: Records },
  CreateRecord: { screen: CreateRecord },
  ViewRecord: { screen: ViewRecord },
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 });

では、パラメータを受け取るときに ViewRecord.js クラスの状態を操作するにはどうすればよいでしょうか?

PS: Create React Native App と共に Expo を使用しています