Reactjs Redux connect不'；t接受reduxForm返回的对象

我在react原生应用程序中有一个简单的表单组件。我使用类型脚本。在我的组件中，我有几个初始化字段和两个连接的操作。最后，我创建表单，然后连接操作和我的存储。不幸的是，这种组合不起作用。我收到一个错误

，您必须将一个组件传递给connect返回的函数。相反，收到的是{“displayName”：“ReduxForm”，“defaultProps”：{…，“form”：“ProfileScreen”}}

当我检查函数reduxForm返回的表单类型时，我收到的是

对象

，而不是

函数

，这就是

连接

拒绝接受它的原因

我的代码如下所示：

import * as React from 'react';
import I18n from 'ex-react-native-i18n'
import {KeyboardAvoidingView, ScrollView, View, ViewStyle} from 'react-native';
import {connect} from 'react-redux';
import {Field, InjectedFormProps, reduxForm} from 'redux-form';
import {Card, CardSection, FormField} from '../components/common';
import {CustomButton} from "../components/CustomButton";
import {Profile, VendorProfile} from "../store/Profile";
import {Store} from "../store/Store";
import {Colors} from "../constants/Colors";
import {FetchProfileFields, fetchProfileFields, saveProfile, SaveProfile} from "../actions/profile/ProfileActions";
import {
    maxLength20,
    maxLength40,
    maxLength5,
    maxLength7,
    maxLength70,
    minLength3,
    minLength5,
    phoneNumber,
    required,
    zipCode
} from "../actions/validations";
import {normalizePhone, normalizeZipCode} from "../actions/normalizations";

interface Props {
    fetchProfileFields: FetchProfileFields
    saveProfile: SaveProfile
    profile: Profile
}

type FormProps = VendorProfile;

class ProfileScreen extends React.Component<InjectedFormProps<FormProps, Props> & Props> {
    componentDidMount() {
        this.props.fetchProfileFields();
    };

    render() {
        const {handleSubmit, pristine, reset} = this.props;
        return (
            <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={75} style={{flex: 1}}>
                <ScrollView keyboardShouldPersistTaps='always'>
                    <Card style={{marginBottom: 20}}>
                        <CardSection round>
                            <Field name="name" validate={[required, minLength5, maxLength40]} component={this.renderField}/>
                            <Field name="companyName" validate={[required, minLength3]} component={this.renderField}/>
                            <Field name="phoneNumber" validate={phoneNumber} normalize={normalizePhone} component={this.renderField}/>
                            <Field name="locality" validate={maxLength20} component={this.renderField}/>
                            <Field name="zipCode" validate={zipCode} normalize={normalizeZipCode} component={this.renderField}/>
                            <Field name="street" validate={maxLength70} component={this.renderField}/>
                            <Field name="streetNumber" validate={maxLength7} component={this.renderField}/>
                            <Field name="flatNumber" validate={maxLength5} component={this.renderField}/>
                        </CardSection>
                    </Card>
                </ScrollView>
                <View style={styles.buttonsContainer}>
                    <CustomButton title={I18n.t('profileScreen.revertChangesButton')}
                                  icon="undo"
                                  onPress={reset}
                                  disabled={!pristine}
                    />
                    <CustomButton title={I18n.t('profileScreen.saveChangesButton')}
                                  icon="save"
                                  onPress={handleSubmit(this.onSubmit)}
                    />
                </View>
            </KeyboardAvoidingView>
        );
    }


    private renderField = (formProps: any) => {
        const name = formProps.input.name;
        const {valid, error} = formProps.meta;

        return (
            <FormField
                label={I18n.t(`profileScreen.${name}`)}
                value={formProps.input.value}
                onChangeText={formProps.input.onChange}
                error={error}
                invalid={!valid}
            />
        );
    };

    private onSubmit = (formProps: FormProps) =>
        this.props.saveProfile(formProps);

}

const styles = {
    buttonsContainer: {
        borderTopWidth: 1,
        borderTopColor: Colors.dark,
        flexDirection: 'row',
        justifyContent: 'center',
        marginBottom: 5,
        paddingTop: 5
    } as ViewStyle,
};

const form = reduxForm<FormProps, Props>({form: 'ProfileScreen', enableReinitialize: true})(ProfileScreen);
console.log(typeof form); // 'object' here instead of 'function'
const mapStateToProps = ({profile}: Store) => ({initialValues: profile.fields, profile});
const mapDispatchToProps = {fetchProfileFields, saveProfile};
export default connect(mapStateToProps, mapDispatchToProps)(form);

---

你知道是什么导致了这个问题吗？当我只使用

connect

或只使用

reduxForm

时，它们就工作了。我该如何进一步调查呢？

我更新了redux和redux表单，现在可以使用了

"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"@types/react-redux": "^7.0.1",
"@types/redux-form": "^7.4.15",

---

它仍然与最新的良好依赖关系相冲突：

    "react": "16.5.0",
    "react-redux": "5.0.7",
    "redux": "4.0.1",
    "redux-form": "8.2.2",

我做了以下几件事：

导出默认连接(
MapStateTops，
mapDispatchToProps，
)（（道具）=>）；

    "react": "16.5.0",
    "react-redux": "5.0.7",
    "redux": "4.0.1",
    "redux-form": "8.2.2",