Question

Uncaught Error: asyncValidate function passed to reduxForm must return a promise

在子组件和父组件中声明多个redux表单会导致上面的错误。我觉得它实际上是一个错误。

我有一个名为WorkExperience的父组件，我在其中呈现多个名为DashboardListItem的子组件，这是用户的工作体验。

在父组件中，我有一个redux表单来创建工作体验。另外，我在子组件中有其他redux表单，我可以为每个列表项切换编辑表单。

结构与此相同。

WorkExperience（有postWorkExperienceForm）
- DashboardListItem（具有填充初始值的编辑表单）
- DashboardListItem
- DashboardListItem

因此，当我输入可切换的编辑表单时，此结构会导致错误。如果我从父组件或子组件中删除redux表单声明，一切都会正常。

所有表格也都在商店里。

谢谢

父组件

renderWorkExperience(){
    const workExperience = this.props.candidate.workExperience;
    return Object.keys(workExperience).map((key, index) => {            
        let date = `${workExperience[key].startYear}-${workExperience[key].endYear}`
        return <DashboardListItem key={index} {...this.props}
            title={workExperience[key].companyName} 
            subTitle={workExperience[key].title} 
            meta={date}
            summary={workExperience[key].summary}
            initialValues={workExperience[key]}
            form={workExperience[key]._id} />
    });
}

renderForm(){
    const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8'
    const { handleSubmit } = this.props;

    return(
        <form onSubmit={ handleSubmit(this.onSubmit) } className="form-horizontal">
            <div className={this.state.displayForm ? 'd-block mb8' : 'd-none'}>
                <Field name="companyName"
                    type="text"
                    label="Company Name"
                    placeholder="Apple inc."
                    id="input-company-name"
                    component={renderHorizontalTextField} />

                <Field name="title"
                    type="text"
                    label="Title"
                    placeholder="Marketing Specialist"
                    id="input-title"
                    component={renderHorizontalTextField} />

                <Field name="startYear"
                    type="text"
                    label="Start Year"
                    placeholder=""
                    id="input-start-year"
                    component={renderHorizontalTextField} />

                <Field name="endYear"
                    type="text"
                    label="End Year"
                    placeholder="Blank if current"
                    id="input-end-year"
                    component={renderHorizontalTextField} />

                <Field name="summary"
                    rows="4"
                    label="Summary"
                    placeholder="Summary..."
                    id="input-summary"
                    component={renderTextAreaFieldWithLabelAndPopover} />
            </div>
            <button type={this.state.displayForm ? "button" : "submit"}
                className={activeClass}
                onClick={this.handleClick}>{ !this.state.displayForm ?
                'Add Work Experience' : 'Save' }
            </button>
        </form>
    )
}

export default reduxForm({
    form: 'postWorkExperienceForm'
})(WorkExperience);

子组件

renderForm(){
    const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8';
    const { handleSubmit } = this.props;

    return(
        <form onSubmit={ handleSubmit(this.onSubmit) } className="form-horizontal">
            <div className={this.state.displayForm ? 'd-block mt8' : 'd-none'}>
                <Field name="companyName"
                    type="text"
                    label="Company Name"
                    placeholder="Apple inc."
                    id="input-company-name"
                    component={renderHorizontalTextField} />

                <Field name="title"
                    type="text"
                    label="Title"
                    placeholder="Marketing Specialist"
                    id="input-title"
                    component={renderHorizontalTextField} />

                <Field name="startYear"
                    type="text"
                    label="Start Year"
                    placeholder=""
                    id="input-start-year"
                    component={renderHorizontalTextField} />

                <Field name="endYear"
                    type="text"
                    label="End Year"
                    placeholder="Blank if current"
                    id="input-end-year"
                    component={renderHorizontalTextField} />

                <Field name="summary"
                    rows="4"
                    label="Summary"
                    placeholder="Summary..."
                    id="input-summary"
                    component={renderTextAreaFieldWithLabelAndPopover} />
                <button className="btn btn-success" type="submit">Save</button>
            </div>
        </form>
    )
}

export default reduxForm({
    enableReinitialize: true
})(
    connect(null, { updateWorkExperience })(DashboardListItem)
);

发现这里有类似的问题。虽然他还没有解决问题，但找到了解决办法。

Redux Form - "form={ }" and "initialValues={ }" properties not recognized with multiple forms (redux-form v7.0.4)

Answer 1

我最终将工作经验表单放入一个名为WorkExperienceForm的单独组件中，并将其导入WorkExperience和DashboardListItem组件。这解决了这个问题。

表单名称从父组件传递到WorkExperienceForm。

我计划将表单放到一个单独的组件中，但是想解决问题。所以如果它是一个bug，它仍然存在。

<强> WorkExperienceForm

import React from 'react';
import { Field, reduxForm } from 'redux-form';

import { renderHorizontalTextField } from '../Fields/TextFields';
import { renderTextAreaFieldWithLabelAndPopover } from '../Fields/TextAreaFields';

const WorkExperienceForm = ({ handleSubmit, onSubmit }) => {
    return(
        <form onSubmit={ handleSubmit(onSubmit) } className="form-horizontal">
            <Field name="companyName"
                type="text"
                label="Company Name"
                placeholder="Apple inc."
                id="input-company-name"
                component={renderHorizontalTextField} />

            <Field name="title"
                type="text"
                label="Title"
                placeholder="Marketing Specialist"
                id="input-title"
                component={renderHorizontalTextField} />

            <Field name="startYear"
                type="text"
                label="Start Year"
                placeholder=""
                id="input-start-year"
                component={renderHorizontalTextField} />

            <Field name="endYear"
                type="text"
                label="End Year"
                placeholder="Blank if current"
                id="input-end-year"
                component={renderHorizontalTextField} />

            <Field name="summary"
                rows="4"
                label="Summary"
                placeholder="Summary..."
                id="input-summary"
                component={renderTextAreaFieldWithLabelAndPopover} />
        </form>
    )
}

export default reduxForm({
    enableReinitialize: true
})(WorkExperienceForm);

在子组件和父组件中声明redux表单会导致错误

1 个答案: