Redux 连接不接受 reduxForm 返回的对象

Question

我在 react-native 应用程序中有简单的表单组件。我使用类型脚本。在我的组件中，我有几个初始化字段和两个连接的操作。最后，我创建表单，然后连接操作和我的商店。不幸的是，这种组合不起作用。我收到一个错误 You must pass a component to the function returned by connect. Instead received {"displayName":"ReduxForm","defaultProps":{...,"form":"ProfileScreen"}}。

当我检查函数 reduxForm 返回的表单类型时，我收到 object 而不是 function，这就是 connect 拒绝接受它的原因。

我的代码如下所示：

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);

我使用的库版本是：

"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-form": "^8.1.0",
"@types/react-redux": "^6.0.9",
"@types/redux-form": "^7.4.15"

知道是什么原因导致了这个问题吗？当我仅使用 connect 或仅使用 reduxForm 时，它们会起作用。我该如何进一步调查？

Answer 1

我更新了 redux 和 redux-form，现在可以使用了

"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",

Answer 2

它仍然与最新的良好依赖关系有关：

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

我通过以下方式解决了这个问题：

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)((props) => <form {...props} />);

Redux 连接不接受 reduxForm 返回的对象

Redux connect doesn't accept object returned by reduxForm

reactjs

react-native

redux

redux-form