[Form] formApi setValue/setError/setTouched 针对数组型 fieldPath 删除某项后，赋值后不符合预期

[pointhalo]

Which Component 出现bug的组件

• Form

semi-ui version

• 1.32.0-beta.0 - now

Expected result 期望的结果是什么

• formApi.setValue 更新值后，根据set的值进行展示
  • setValue [{ name: '1-name', type: '1-type' }, {.name: '3-name', type: '3-type'}]

Actual result 实际的结果是什么

• setValue [{ name: '1-name', type: '1-type' }, {.name: '3-name', type: '3-type'}] 后, 实际得到的是 [{ name: '1-name', type: '1-type' }, {.name: '', type: ''}]

Steps to reproduce 复现步骤

• 1、点击第二行的remove （如果点击第一行的remove其实也不符合预期，只有remove最后一行时正常）

Reproducible code 复现代码

class ManualArrayField extends React.Component {
    constructor() {
        super();
        this.state = {
            initValues: {
                effects: [
                    { name: 'A1-name', type: 'A1-type', key: 0 },
                    { name: 'A2-name', type: 'A2-type', key: 1 },
                    { name: 'A3-name', type: 'A3-type', key: 2 },
                ]
            }
        };
        this.id = 3;
        this.getFormApi = this.getFormApi.bind(this);
        this.add = this.add.bind(this);
        this.remove = this.remove.bind(this);
        this.renderItems = this.renderItems.bind(this);
    }
    getFormApi(formApi) {
        this.formApi = formApi;
    }
    add(obj) {
        let effects = this.formApi.getValue('effects');
        if (!effects) {
            effects = [];
        }
        effects.push({ name: '', type: '', key: this.id++ });
        this.formApi.setValue('effects', effects);
    }
    remove(key) {
        let effects = this.formApi.getValue('effects');
        effects = effects.filter((effect, index) => key !== effect.key);
        if (!effects.length) {
            effects = undefined;
        }
        this.formApi.setValue('effects', effects);
    }
    renderItems(formState, values) {
        return values.effects && values.effects.map((effect, i) => (
            <div key={effect.key} style={{ width: 1000, display: 'flex' }}>
                <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 16 }} />
                <Form.Select field={`effects[${i}].type`} style={{ width: 90 }}>
                    <Form.Select.Option value="2D">2D</Form.Select.Option>
                    <Form.Select.Option value="3D">3D</Form.Select.Option>
                </Form.Select>
                <Button type="danger" onClick={() => this.remove(effect.key)} style={{ margin: 16 }}>Remove</Button>
            </div>
        ));
    }
    render() {
        let { initValues } = this.state;
        return (
            <Form
                getFormApi={this.getFormApi}
                initValues={initValues}
                style={{ width: 500 }}
                labelPosition="left"
                labelWidth="180px"
            >
                {({ formState, values }) => (
                    <>
                        <Button onClick={this.add}>add</Button>
                        {this.renderItems(formState, values)}
                        <div>
                            {JSON.stringify(formState)}
                        </div>
                    </>
                )}
            </Form>
        );
    }
}

Additional information 补充说明

• 遇到这个bug的业务场景、上下文、或者你的需求场景

[pointhalo]

fix 2.6.0-beta.0