zoukankan      html  css  js  c++  java
  • Antd Select组件结合使用出现must set key for <rc-animate> 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>
    
  • 相关阅读:
    Linux报错:“/bin/bash^M: 坏的解释器
    搭建单向HTTPS
    Wamp Apache 启动失败检测方法
    Excel 日常操作
    apache https 双向认证
    android搭建
    我身为程序员踩过的坑
    windows 2008 安装 apache + mysql + php
    Svn
    工具软件类
  • 原文地址:https://www.cnblogs.com/soyxiaobi/p/10001527.html
Copyright © 2011-2022 走看看