Объявление избыточной формы в дочернем и родительском компоненте приводит к ошибке

Question

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

Объявление нескольких избыточных форм как в дочернем, так и в родительском компонентах приводит к появлению ошибки выше Я чувствую, что это ошибка на самом деле.

У меня есть родительский компонент под названием WorkExperience, где я рендеринг нескольких дочерних компонентов называется DashboardListItem, который является опытом работы пользователя.

В родительском компоненте у меня есть избыточная форма для создания опыта работы. Кроме того, в дочернем компоненте есть другие формы-редуксы, где я могу переключать формы редактирования для каждого элемента списка.

Структура такая же, как эта.

• WorkExperience (имеет postWorkExperienceForm)
  • DashboardListItem (имеет форму редактирования с заполненными начальными значениями)
  • DashboardListItem
  • DashboardListItem

Таким образом, эта структура вызывает ошибку, когда я набираю в переключаемой форме редактирования. Если я удаляю объявление избыточной формы из родительского или дочернего компонента, все становится нормальным.

Также все формы в магазине тоже.

Спасибо

Родительский компонент

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={ }" и "initialValues ​​= {}" не распознаются в нескольких формах (redux-form v7.0.4)

Answer 1

Я закончил тем, что поместил форму опыта работы в отдельный компонент под названием WorkExperienceForm и импортировал его в WorkExperience а также DashboardListItem компоненты. Это решило проблему.

Имена форм передаются WorkExperienceForm из родительских компонентов.

Я планировал поместить формы в отдельный компонент в любом случае, но хотел решить проблему. Таким образом, ошибка все еще существует, если она есть.

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