antd Form shouldUpdate 关联展示 form 数组赋值
form 数组中嵌套数值更新
注意：数组是引用类型
项目需求，表单中包含多个产品信息，使用form.list 数组嵌套，提货方式如果是邮寄展示地址，如果是自提，需要在该条目中增加两项
代码如下：
// An highlighted block
<Card
title="产品信息"
bordered={false}>
<Form.List name="productList" >
{(fields, {add, remove}) => (
<>
{fields.map((field,index) => (
<Row gutter={16} >
{/* 用得时候只需要修改下面，将需要重复展示的部分替换下面部分即可 注意 -----start*/ }
<Col sm={24} md={12} lg={8} xxl={6}>
<Form.Item
{...field}
label="库存组织"
name={[field.name,"kuCun"]}
rules={[{
required: true,
message: '请选择',
},]}
>
<Select>
<Select.Option value="u238475">u238475</Select.Option>
<Select.Option value="u238472">u238472</Select.Option>
</Select>
</Form.Item>
</Col>
<Col sm={24} md={12} lg={8} xxl={6}>
<Form.Item
{...field}
label="产品线"
name={[field.name,"chanPin"]}
rules={[{
required: true,
message: '请输入',
},]}
>
<Select>
<Select.Option value="you1">CTM-产品1</Select.Option>
<Select.Option value="zi1">CTM-产品2</Select.Option>
</Select>
</Form.Item>
</Col>
<Col sm={24} md={12} lg={8} xxl={6}>
<Form.Item
{...field}
label="产品名称"
name={[field.name,"wuMiao"]}
rules={[{
required: true,
message: '请输入',
},]}
>
<Input placeholder="请输入" />
</Form.Item>
</Col>
<Col sm={24} md={12} lg={8} xxl={6}>
<Form.Item
{...field}
label="提货方式"
name={[field.name,"tType"]}
rules={[{
required: true,
message: '请输入',
},]}
>
<Select>
<Select.Option value="you">邮寄</Select.Option>
<Select.Option value="zi">自提</Select.Option>
</Select>
</Form.Item>
</Col>
<Form.Item noStyle shouldUpdate={(pre,cur) => {
// 如果删除一条信息，cur.productList[index]是空值，所以需要判断
if(cur.productList[index]&&pre.productList[index]){
// 判断当前是自提还是邮寄
return pre.productList[index].tType !== cur.productList[index].tType
}else{
return false
}
}}>
{({getFieldValue}) =>{
const type = getFieldValue('productList')
{/* 当前是自提的时候需要填写自提人信息 */}
if(type[index].tType&&type[index].tType=='zi'){
return <>
<Col sm={24} md={12} lg={8} xxl={6}>
<Form.Item
{...field}
label="自提人姓名"
name={[field.name,"tName"]}
rules={[{
required: true,
message: '请输入',
},]}
>
<Input placeholder="请输入" />
</Form.Item>
</Col>
<Col sm={24} md={12} lg={8} xxl={6}>
<Form.Item
{...field}
label="身份证号"
name={[field.name,"tShen"]}
rules={[{
required: true,
message: '请输入',
},]}
>
<Input placeholder="请输入" />
</Form.Item>
</Col>
</>
}else{
{/* 有一个问题，当切换回邮寄。之前填写的自提人和身份证号删除
（只需要将type数组中的数据清空即可，不需要再特意给form赋值，他们是引用类型） */}
Object.assign(type[index],{tName:'',tShen:''})
return <></>
}
}}
</Form.Item>
{ /* 用得时候只需要修改下面，将需要重复展示的部分替换下面部分即可 -----end*/ }
<div styleName="item_btn_wrap">
<PlusCircleFilled styleName="add_item_btn" onClick={() => add({tType:'zi'})} />
{fields.length>1&&<CloseCircleFilled styleName="remove_item_btn" onClick={() => remove(field.name)} />}
</div>
</Row>
))}
</>
)}
</Form.List>
</Card>
**关键点解释**
1. shouldUpdate 是依赖当前form中的变化。所以在其中加上判断，pre是之前 cur是当前，然后根据数组嵌套找到当前值变化就返回true,就会走下面的代码
2. Form.Item noStyle 是没有样式的，不需要添加{...field} 不是其中一项
3. getFieldValue 获取当前的form值，根据值来展示
问题 在切换不展示时，之前填写的值不清空，所以重点来了
数组是引用类型
数组是引用类型
数组是引用类型
之前一直解决不了，还想用setFomValue来解决，根本不用，因为数组是引用类型，所以直接操作原来的数组值就可以
// An highlighted block
Object.assign(type[index],{tName:'',tShen:''})