Reactjs Redux表单：FieldArray中的更改提交父表单

我在redux表单上遇到了一个问题。我有一个表单，它正在填充初始值。在顶级表单中，我有一个

FieldArray

，它呈现输入字段列表。每个输入字段都有删除它的按钮（通过

字段。删除（索引）

）或在它后面插入另一个输入（通过

字段。插入（索引+1）

）。我的问题是：当我调用

fields.insert（）

时，新字段被正确插入和注册，但父表单被提交，而它不应该被提交。当数据数组至少有一项时，

fields.push（）也会发生同样的情况。但它不适用于例如
字段.remove（）
或
字段.removeAll（）
。我不明白提交文件的原因/地点。我花了好几个小时挖掘源代码，并使用了官方的
FieldArray
示例，该示例确实有效。我在网上找不到这个问题，所以我想我在某个地方有个bug，因为它独立于正在使用的redux表单版本（尝试>=6）

谢谢你的帮助，这是代码

父表单

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

import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';
import Button from 'muicss/lib/react/button';
import MaterialInput from '../material/material-input';
import MaterialSelect from '../material/material-select';
import MaterialFieldArray from '../material/material-fieldarray';

import Cover from './cover';
import CheckboxGroup from './checkbox-group';

const MovieDetailsEditForm = props => {

    const { handleSubmit, initialValues: { cover: { large: cover }, directors = [], actors = [] } } = props;

    const getFSKOptions = () => {
        return [
            {value: 0, label: 0},
            {value: 6, label: 6},
            {value: 12, label: 12},
            {value: 16, label: 16},
            {value: 18, label: 18}
        ];
    };

    const getFormats = () => {
        return [{value: 'DVD', label: 'DVD'}, {value: 'Blu-ray', label: 'Blu-Ray'}];
    }

    const getImages = () => props.initialValues.images.map( (image) => ({ value: image.large, checked: false }) );

    return (
        <Row>
            <form className="mui-form" onSubmit={handleSubmit(props.handleFormSubmit)}>
                <Col xs="12">
                    <Button type="submit" color="primary">Speichern</Button>
                </Col>
                <Col xs="12">
                    <Row>
                        <Col xs="12" md="6">
                            <Row>
                                <Col xs="12">
                                    <Field name="title" id="title" component={MaterialInput} label="Filmtitel" type="text" />
                                </Col>
                                <Col xs="6">
                                    <Field name="duration" id="duration" component={MaterialInput} label={props.initialValues.unit} type="text" />
                                </Col>
                                <Col xs="6">
                                    <Field
                                        name="format"
                                        id="format"
                                        options={getFormats()}
                                        component={MaterialSelect}
                                        label="Format"
                                        parse={(value, name) => value ? value : null}
                                    />
                                </Col>
                                <Col xs="12">
                                    <Field
                                        name="fsk"
                                        id="fsk"
                                        options={getFSKOptions()}
                                        component={MaterialSelect}
                                        label="FSK Einstufung"
                                        labelText="Freigegeben ab <<PLACEHOLDER>> Jahren"
                                        parse={(value, name) => value ? value : null}
                                    />
                                </Col>
                                { directors &&
                                    <Col xs="12">
                                        <h3>Regisseur{directors.length > 1 ? 'e' : ''}</h3>
                                        <FieldArray component={MaterialFieldArray} name="directors" />
                                    </Col>
                                }
                                { actors &&
                                    <Col xs="12">
                                        <h3>Cast</h3>
                                        <FieldArray component={MaterialFieldArray} name="actors" />
                                    </Col>
                                }
                            </Row>
                        </Col>
                        <Col xs="12" md="6" className="cover">
                            <Field {...props} name="cover" id="cover" component={Cover} />
                        </Col>
                    </Row>
                </Col>
                <Col xs="12">
                    <Field {...props} name="images" component={CheckboxGroup} valueProperty="large" />
                </Col>
            </form>
        </Row>
    );

}

export default reduxForm({
    form: 'MovieDetails',
    enableReinitialize: true
})(MovieDetailsEditForm);

从“React”导入React；
从'redux form'导入{Field，FieldArray，reduxForm}；
从“muicss/lib/react/Row”导入行；
从“muicss/lib/react/Col”导入Col；
从“muicss/lib/react/Button”导入按钮；
从“../material/material input”导入MaterialInput；
导入物料从“../material/material select”中选择；
从“../material/material fieldarray”导入MaterialFieldArray；
从“./封面”导入封面；
从“./checkbox group”导入CheckboxGroup；
const MovieDetailsEditForm=props=>{
const{handleSubmit，initialValues:{cover:{large:cover}，directors=[]，actors=[]}}=props；
常量getFSKOptions=（）=>{
返回[
{值：0，标签：0}，
{值：6，标签：6}，
{值：12，标签：12}，
{值：16，标签：16}，
{值：18，标签：18}
];
};
常量getFormats=（）=>{
返回[{value:'DVD'，label:'DVD'}，{value:'Blu-ray'，label:'Blu-ray'}]；
}
const getImages=（）=>props.initialValues.images.map（（image）=>（{value:image.large，checked:false}））；
返回(
斯皮切恩
值？值：null}
/>
值？值：null}
/>
{董事&&
Regisseur{directors.length>1？'e'：'''}
}
{演员&&
铸造
}
);
}
导出默认reduxForm({
表格：‘电影详情’，
启用重新初始化：true
})（电影详情表）；

材质字段数组.js

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

import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';
import Button from 'muicss/lib/react/button';

import MaterialInput from '../material/material-input';

export default props => {
    const { fields } = props;

    const addEntry = index => fields.insert(index + 1, '');
    const removeEntry = index => fields.remove(index);

    const renderEntries = () => {
        return fields.map((field, index) => {
            return (<li key={index}>
                <Col xs="7" sm="8" md="7" lg="8">
                    <Field component={MaterialInput} name={`${field}`} id={`${field}`} />
                </Col>
                <Col xs="5" sm="4" md="5" lg="4" className="buttons">
                    <Button variant="fab" size="small" color="primary" onClick={() => addEntry(index)}>+</Button>
                    <Button variant="fab" size="small" color="danger" onClick={() => removeEntry(index)}>-</Button>
                </Col>
            </li>);
        })
    }

    return (
        fields.length &&
        <ul className="inputfield-list">
            { renderEntries() }
        </ul>
        || <Button onClick={() => fields.push('')}>Add</Button>
    )
}

从“React”导入React；
从'redux form'导入{Field}；
从“muicss/lib/react/Row”导入行；
从“muicss/lib/react/Col”导入Col；
从“muicss/lib/react/Button”导入按钮；
从“../material/material input”导入MaterialInput；
导出默认道具=>{
常量{fields}=props；
常量addEntry=index=>fields.insert（索引+1'）；
const removentry=index=>fields.remove（index）；
const renderEntries=（）=>{
返回字段.map（（字段，索引）=>{
返回（

附录（索引）}>+
removeEntry（索引）}>-
）；
})
}
返回(
字段长度&&

{renderEntries（）}

||fields.push（“”）}>Add
)
}
好的，这个问题非常微妙，与React或Redux表单无关。我忘了在向
字段数组添加/删除项目的按钮上添加
type=“button”

addEntry（index）}>+

这就是HTML表单的工作原理