semi-design
semi-design copied to clipboard
[Form] FormApi.setValues 行为与文档不符
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 补充说明
- 无
debug了一下发现是下述这里value为undefined所致,加了个判断后行为正常了 https://github.com/DouyinFE/semi-design/blob/289182375457aa7baabf5ad20c532e33e10e87f7/packages/semi-foundation/form/foundation.ts#L393
value&&field.fieldApi.setValue(value, opts);
情况如何