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

Question

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

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

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

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

结构与此相同。

• WorkExperience（具有 postWorkExperienceForm）
  • 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。

我本来打算将表单放入一个单独的组件中，但想解决这个问题。所以如果是一个错误，它仍然存在。

工作经验表格

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