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

Question

我有一个名为List.js 的页面和一个名为vansFilterModal.js 的List.js 组件文件，值来自List.js 中的NavigationSerice，但代码太大所以我创建了一个组件并移动了模态代码从 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,
};

谁能帮助我为什么它给我未定义的错误？

Answer 1

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

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