Antd Select組件結合使用出現must set key for children問題

一、以下情況可能導致錯誤發生

出現這個問題的首要條件是因為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>