antd Form shouldUpdate 关联展示 form 数组赋值

form 数组中嵌套数值更新

注意：数组是引用类型

项目需求，表单中包含多个产品信息，使用form.list 数组嵌套，提货方式如果是邮寄展示地址，如果是自提，需要在该条目中增加两项

代码如下：
1

// 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

**关键点解释**

 1. shouldUpdate 是依赖当前form中的变化。所以在其中加上判断，pre是之前 cur是当前，然后根据数组嵌套找到当前值变化就返回true,就会走下面的代码
 2. Form.Item noStyle 是没有样式的，不需要添加{...field} 不是其中一项
 3. getFieldValue 获取当前的form值，根据值来展示
1
2
3
4
5

问题 在切换不展示时，之前填写的值不清空，所以重点来了
数组是引用类型
数组是引用类型
数组是引用类型

之前一直解决不了，还想用setFomValue来解决，根本不用，因为数组是引用类型，所以直接操作原来的数组值就可以

// An highlighted block
Object.assign(type[index],{tName:'',tShen:''})
1
2