尝试从NavigationService获取表单值,但出现未定义的函数错误

时间:2019-05-08 10:17:26

标签: forms api react-native react-native-navigation formik

我有一个名为List.js的页面,以及一个名为vansFilterModal.js的List.js的组件文件,值来自List.js中的NavigationSerice,但是代码太大,所以我创建了一个组件,然后将Modal代码从List.js移至vansFilterModal.js并将其导入List.js,但是现在它没有获取值,这是向我发送此错误的消息:

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

Click here to see error screenshot

这是我的代码:

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 :(得分:0)

如果未定义this.props.navigation,则必须使用withNavigation

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