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

Form.Item 的 shouldUpdate 函数返回false 不会中断更新,造成死循环

Open vinson-bs opened this issue 3 years ago • 8 comments

Reproduction link

Edit on CodeSandbox

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

vinson-bs avatar Apr 29 '22 08:04 vinson-bs

You may look for issues:

  1. 10% #35286

🤖 By issues-similarity-analysis

github-actions[bot] avatar Apr 29 '22 08:04 github-actions[bot]

我也遇到了这个问题,你是怎么解决的

kyosky110 avatar May 07 '22 06:05 kyosky110

@afc163 确认下是不是bug?我可以修复

Dunqing avatar May 07 '22 06:05 Dunqing

useWatch 有关,具体还要再挖一下。 可以先换成 form.getFieldValue

MadCcc avatar Jun 14 '22 03:06 MadCcc

可以用form.useWatch实现表单项联动。

  const OtherFormItem = ()=>{
   const form = Form.useFormInstance();
   const item1 = Form.useWatch('item1', form);
   useEffect(()=>{
    // code...
   },[item1]);
  return <div>{item1}<div>
 }

weipengzou avatar Jun 22 '22 17:06 weipengzou

我也遇到了这个问题,还没有修复吗?

sunyongming avatar Aug 04 '22 02:08 sunyongming

我也遇到了这个问题,还没有修复吗?

yuwuzhan avatar Dec 13 '22 09:12 yuwuzhan

遇到了 相同的问题,如果在回调函数中使用setFieldValue/setFieldsValue会导致更新不会中断,导致死循环。使用 Form.useWatch 处理了,如果有人有更好的方式 捞一下

ZeroJsus avatar Jan 17 '23 10:01 ZeroJsus

+1, 我发现只要使用了 setFieldsValue shouldUpdate 就不work 了

shaoqiwang-fe avatar Jun 12 '23 09:06 shaoqiwang-fe

useWatch 有关,具体还要再挖一下。 可以先换成 form.getFieldValue

感觉和 useWatch 无关吧,我们的使用的版本还没 useWatch 这个api呢,也会有这个问题

shaoqiwang-fe avatar Jun 13 '23 02:06 shaoqiwang-fe