semi-design icon indicating copy to clipboard operation
semi-design copied to clipboard

[Form] FormApi.setValues 行为与文档不符

Open zixuan945 opened this issue 2 years ago • 2 comments

Which Component 出现bug的组件

  • Form

semi-ui version

  • latest

Expected result 期望的结果是什么

  • 根据文档,第二个参数中的 isOverride 默认为 false,默认情况下只会从newValues中取 Form 中已存在的 field 的值更新到formState.values中,我的理解是合并newValues 至 formStatus.values中

Actual result 实际的结果是什么

  • 直接设置formStatus.values为 newValues,不存在的值直接被 reset 为空值

Steps to reproduce 复现步骤

If your reproduction scene is complicated, you can list the reproduction steps here

如果你的复现场景比较复杂,可以在这里列出复现的步骤

  • 见下述示例

Reproducible code 复现代码

  • You can paste a minimal reproducible code, preferably runnable in the code editing area of Semi official website 借用官网上例子Hooks的使用稍做更改。期待行为是只更新name而保留test,实际上test字段被直接reset
import React from 'react';
import { useFormApi, Form, Button } from '@douyinfe/semi-ui';

class UseFromApiDemo extends React.Component {
    constructor() { super(); }
    render() {
        const ComponentUsingFormApi = () => {
            const formApi = useFormApi();
            const change = () => {
                formApi.setValues({'name':Math.random()});
            };
            return (
                <Button onClick={change}>ChangeName By【formApi】</Button>
            );
        };
        return (
            <Form>
                <Form.Input field='name' initValue='mike'></Form.Input>
                <Form.Input field='test' initValue='testA'></Form.Input>
                <ComponentUsingFormApi />
            </Form>
        );
    }
}

  • You can also use Codesandbox to create a minimal reproduction scene use Semi template

Reproducible Codesandbox link: https://codesandbox.io

  • Or, if your scene is more complex, you can use other templates to create a reproducible scene

Reproducible Codesandbox link: https://codesandbox.io

Additional information 补充说明

zixuan945 avatar Jun 05 '22 08:06 zixuan945

debug了一下发现是下述这里value为undefined所致,加了个判断后行为正常了 https://github.com/DouyinFE/semi-design/blob/289182375457aa7baabf5ad20c532e33e10e87f7/packages/semi-foundation/form/foundation.ts#L393

value&&field.fieldApi.setValue(value, opts);

zixuan945 avatar Jun 05 '22 08:06 zixuan945

情况如何

xmsz-stu avatar Jul 26 '23 14:07 xmsz-stu