reactjs - 最终形式：从特定 FieldArray 中删除一个条目会从另一个 FieldArray 中删除一个条目

Question

我设置了一个包含多个 FieldArrays 的表单。它们在不同的子组件中呈现，这些子组件也通过 props 获取表单变量和值。在每个步骤中，我都有一个 FieldArray，其名称也不同。这是父组件，它根据用户所在的步骤决定要渲染的子组件。

const getPageContentBasedOnStep = (
    step: Step,
    form: FormApi<MyParentObject, Partial<MyParentObject>>,
): ReactNode => {
    switch (step) {
        case Step.ONE:
            return <>
                {renderContentOfStepOne(form)}
            </>;
        case Step.TWO:
            return <>
                {renderContentOfStepTwo(form)}
            </>;
        default:
            return neverReachedFor(step);
    }
};

这将是 Step 1 子组件的内部：

 const renderContentOfStepOne= (form: FormApi<MyParentObject, Partial<MyParentObject>>) => 
<FieldArray name={'step_one_field_array'}>
            {({ fields }: { fields: Foo}) => {
                return fields.map((path, index) => {
                    return <ComponentForStepOne
                        key={path}
                        myObject={fields.value[index]}
                        deleteMyObject={form.mutators.deleteFooWithACustomMutator}
                    />;
                });
            }}
        </FieldArray>

这将是第 2 步子组件的内部：

const renderContentOfStepTwo= (form: FormApi<MyParentObject, Partial<MyParentObject>>) => 
<FieldArray name={'step_two_field_array'}>
            {({ fields }: { fields: Bar}) => {
                return fields.map((path, index) => {
                    return <ComponentForStepTwo
                        key={path}
                        myObject={fields.value[index]}
                        deleteMyObject={() => fields.remove(index)}
                    />;
                });
            }}
        </FieldArray>

在这两个子组件中，我确实有一个类似按钮的东西，看起来像这样：

<button onClick={() => props.deleteMyObject()}>
    Delete
</button>

让我们假设表单状态中的数据结构如下所示：

{
 "step_one_field_array": [{
   "foo": "1"
 }], 
 "step_two_field_array": [{
    "bar": "1"
 }]
}

现在奇怪的事情来了。每当我从第一步填充我的 FieldArray 并继续前进时，我都能够填充并与步骤 2 的 FieldArray 交互。只有当我想实际单击按钮以从第二个 FieldArray 中删除条目时（在第二步中） ，它以某种方式从第一个 FieldArray （从第一步）中删除条目（在相同的第一/第二/第三索引处）。它真的很烦人。

此外，当我像这样调用函数时，() => console.log(fields.remove(index)它会从第一步和第一个 FieldArray 记录对象。

有没有人遇到过这种情况，或者有人看到错误在哪里？

标签： reactjstypescriptfinal-formreact-final-form-arrays