Question

我一直在研究我的第一个React Native项目。它是一个多屏幕应用程序，其中一个屏幕需要一些数据，我从父屏幕传递。但问题是，当我在子屏幕上收到数据并尝试将值保存在屏幕状态时，应用程序崩溃了。一旦我删除访问状态的代码，它就不会崩溃。这是代码：

    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：我正在使用Expo和Create React Native App

如何在React Native中使用Stack Navigator传递参数时访问状态

0 个答案: