ant-design
ant-design copied to clipboard
Form.Item 的 shouldUpdate 函数返回false 不会中断更新,造成死循环
Reproduction link
Steps to reproduce
<Form.Item key = 'pSelect' name = 'pSelect' label="ZKSelect">
<Select >
<Option value="">请选择</Option>
<Option value="c1">c1</Option>
<Option value="c2">c2</Option>
</Select>
</Form.Item>
<Form.Item key = 'linkSelect-2-noStyle' noStyle
shouldUpdate={ (prevValues, curValues) => {
return false;
// return prevValues[`pSelect`] != curValues[`pSelect`]
}}
>
{({ getFieldValue, setFieldsValue, isFieldTouched })=>{
// 组件内容更新代码片段
let svParent = getFieldValue('pSelect');
let isOptParent = isFieldTouched('pSelect');
// console.log("[^_^:20220427-1615-002]", isOptParent, pSelectValue);
if(isOptParent){
// 操作过上级节点
let v = {'linkSelect-2':''};
// form.setFieldsValue(v);
form.resetFields(['linkSelect-2']);
}
return (
<Form.Item key = {'linkSelect-2'} name = 'linkSelect-2' label="联动 linkSelect-2" >
<Select>
<Option value="">请选择</Option>
</Select>
</Form.Item>
);
}}
</Form.Item>
What is expected?
shouldUpdate 返回 false 时不更新组件;即不执行 组件内容更新代码片段
What is actually happening?
shouldUpdate 返回 false 时;执行了 组件内容更新代码片段
| Environment | Info |
|---|---|
| antd | 4.20.1 |
| React | 16.14.0 |
| System | macOS Monterey 12.2 |
| Browser | Chrome |
我也遇到了这个问题,你是怎么解决的
@afc163 确认下是不是bug?我可以修复
和 useWatch 有关,具体还要再挖一下。
可以先换成 form.getFieldValue。
可以用form.useWatch实现表单项联动。
const OtherFormItem = ()=>{
const form = Form.useFormInstance();
const item1 = Form.useWatch('item1', form);
useEffect(()=>{
// code...
},[item1]);
return <div>{item1}<div>
}
我也遇到了这个问题,还没有修复吗?
我也遇到了这个问题,还没有修复吗?
遇到了 相同的问题,如果在回调函数中使用setFieldValue/setFieldsValue会导致更新不会中断,导致死循环。使用 Form.useWatch 处理了,如果有人有更好的方式 捞一下
+1, 我发现只要使用了 setFieldsValue shouldUpdate 就不work 了
和
useWatch有关,具体还要再挖一下。 可以先换成form.getFieldValue。
感觉和 useWatch 无关吧,我们的使用的版本还没 useWatch 这个api呢,也会有这个问题