Попытка получить значения формы из NavigationService, но получение неопределенной ошибки функции - PullRequest
Новая
       26

Попытка получить значения формы из NavigationService, но получение неопределенной ошибки функции

0 голосов
/ 08 мая 2019

У меня есть страница с именем List.js и файл компонента для List.js с именем vansFilterModal.js, значения поступали из NavigationSerice в List.js, но код был слишком велик, поэтому я создал компонент и переместил модальный код из List.js в vansFilterModal.js и импортировал его в List.js, но теперь он не получает значения, он посылает мне эту ошибку: 

TypeError: undefined is not an object (evaluating 'this.props.navigation.getParam('formData')')

Нажмите здесь, чтобы увидеть скриншот ошибки

Вот мой код:

List.js: 

        import React, { Component } from 'react';
        import { Platform, View, ScrollView, StatusBar, SafeAreaView, ActivityIndicator, TouchableOpacity } from 'react-native';
        import NavigationService from './../../Navigation/NavigationService';
        import VansFilterModal from './../../components/vansFilterModal';
        import VansFilterList from './../../components/vansFilterList';

        class ListPage extends Component {

        static navigationOptions = {
            title: 'List Page',
        };
        render() {
                const homeScreenData = this.props.navigation.getParam('formData');
                return (
                    <View style={styles.exampleContainer}>
                        <VansFilterList />
                        <VansFilterModal />
                    </View>
                );
            }
          }

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(ListPage);

vansFilterModal.js 

    import React, { Component } from 'react';
    import { bindActionCreators } from "redux";
    import { connect } from "react-redux";
    import { View } from 'react-native';
    import { showVansFilter, hideVansFilter } from './../../actions/instantPricesAction';
    import {  Item, Input, Text } from 'native-base';
    import Modal from "react-native-modal";
    import NavigationService from './../Navigation/NavigationService';

    class VansFilterModal extends Component {

        render() {
            const homeScreenData = this.props.navigation.getParam('formData');
            const { visibleVansFilter, hideVansFilter } = this.props;
            return (
                <View>
                    <Modal
                        isVisible={visibleVansFilter}
                        onBackdropPress={() => hideVansFilter()}
                    >
                        <View>
                           <Text> {homeScreenData.pickupLocation}</Text>
                           <Text>{homeScreenData.dropoffLocation}</Text>
                           <Item rounded>
                               <Input placeholder="Pick up location" />
                           </Item>
                        </View>
                    </Modal>
                </View>
            )
        }
    }

NavigationService.js 

import { NavigationActions } from 'react-navigation';

let _navigator;

const setTopLevelNavigator = (navigatorRef) => {
    _navigator = navigatorRef;
}

const navigate = (routeName, params) => {
    _navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params,
        })
    );
}

export default {
    navigate,
    setTopLevelNavigator,
};

Может кто-нибудь помочь мне, почему он дает мне неопределенную ошибку?

1 Ответ

0 голосов
/ 08 мая 2019

Если this.props.navigation не определено, вы должны использовать withNavigation: 

import {withNavigation} from 'react-navigation'
class YourComponent extends Component {
    // ...
}
export default withNavigation(YourComponent)
...