Antd Select组件结合使用出现must set key for <rc-animate> children问题-优快云博客

本文分析了Ant Design中Select组件在设置为multiple或tags模式下，因默认值包含空字符串而导致的问题，并提供了两种解决方案：一是设置defaultValue为空数组，二是为initialValue指定有效的默认值。

一、以下情况可能导致错误发生

出现这个问题的首要条件是因为Select的mode 设置成multiple or tags

1. Select的defaultValue使用了空字符串

例如:

const emptyValue = ''
const emptyValueArr = ['1', '']
<Select
    mode="tags"
    defaultValue= emptyValue || emptyValueArr
>
    {
        [1, 2].map((item, index) => (
            <Option key={index} value={item}>{item}</Option>
        ))
    }
</Select>

2. 结合Form的initialValue包含空字符串

<FormItem {...formItemLayout} label="负责人">
    {getFieldDecorator('ownersAsList', {
        rules: [{
            required: true,
            message: '负责人不能为空'
        }],
        initialValue: ownersAsList || ['']
    })(
        <Select
            mode="tags"                                   
        >
            {
                ownersList.map((item, index) => (
                    <Option key={index} value={item}>{item}</Option>
                ))
            }
        </Select>
    )}
</FormItem>

二、解决办法

1. 如果你不需要默认值, 直接设置为空数组: defaultValue = []

注意: 空数组 != 含空字符串数组

<Select
    mode="tags"
    defaultValue = []
>
    {
        [1, 2].map((item, index) => (
            <Option key={index} value={item}>{item}</Option>
        ))
    }
</Select>

2. 如果希望有默认选中值: initialValue: ownersAsList || ['默认值']

<FormItem {...formItemLayout} label="负责人">
    {getFieldDecorator('ownersAsList', {
        rules: [{
            required: true,
            message: '负责人不能为空'
        }],
        initialValue: ownersAsList || ['默认值']
    })(
        <Select mode="tags" >
            {
                ownersList.map((item, index) => (
                    <Option key={index} value={item}>{item}</Option>
                ))
            }
        </Select>
    )}
</FormItem>

转载于:https://www.cnblogs.com/soyxiaobi/p/10001527.html