最终形式：从特定 FieldArray 中删除条目从不同 FieldArray 中删除条目

问题描述

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

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 中的对象。

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）