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 Connect不接受ReduxForm返回的对象

2 个答案: