尝试从 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)

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

Trying to get form values from NavigationService but getting undefined function error

forms

api

react-native

react-native-navigation

formik