ant Design中Select设置initialValue时的大坑

• 我出现的问题：例如在编辑活动关联红包的时候，需求是select显示的是红包名称，但是表单提交的时候是红包ID：设置默认值的initialValue为Id的时候，会出现显示是id (需要的是显示名称)；如果设置默认值initialValue是名称，那么下一步操作会出现报错

但是我还有一种情况：某个活动关联的红包被删除了，在Select中的可供选项中redPackets没有这个红包的时候，显示的会是红包id,而不是红包名称

• 错误效果图：

错误显示图（0-1）

• 期待正确效果图 

正确显示图

 

 

• 解决方案：在默认值的后面加上一个空字符串进行转换；

            
            <FormItem {...formItemLayout} label="活动红包">
              {getFieldDecorator("redPacketId", {
                rules: [{ required: true, message: "红包必填" }],
                initialValue: redPacketId + ""
              })(
                <Select>
                  {redPackets.map(rp => (
                    <Option key={rp.redPacketCommonId}>{rp.packetName}</Option>
                  ))}
                </Select>
              )}
            </FormItem>

• 注意：initialValue设置的值本应该属于Select可供选的数据中某一个,select框显示的内容就是我们所希望的红包名称，提交form表单的时候，值就是Id；如果设置的值在Select可供选数据中找不到（例如：这里的select可供选数据是redPackets），那么显示的就是Id而不是名称。所以我们在设置initialValue的时候，应该填写的是下拉列表中包含option的value的值。