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

plupiseo  于 2022-11-19  发布在  其他
关注(0)|答案(6)|浏览(443)

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 时;执行了 组件内容更新代码片段

EnvironmentInfo
antd4.20.1
React16.14.0
SystemmacOS Monterey 12.2
BrowserChrome
wdebmtf2

wdebmtf22#

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

jm2pwxwz

jm2pwxwz3#

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

blpfk2vs

blpfk2vs4#

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

zysjyyx4

zysjyyx45#

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

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

shouldUpdate 试了下返回true 无限循环触发子组件更新了

oipij1gg

oipij1gg6#

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

相关问题