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>
    
  • 相关阅读:
    RN的win7开发环境部署和问题解决
    Android EditText弹出软键盘实现页面标题头不动,软键盘弹出在编辑框下面
    android打包生成apk时自定义文件名版本号。自定义项目字段等等
    Android ConstraintLayout 约束布局属性
    AS基本设置
    PermissionUtils
    kotlin之字符串模板
    kotlin之字符串
    kotlin之数组
    kotlin之布尔类型
  • 原文地址:https://www.cnblogs.com/soyxiaobi/p/10001527.html
Copyright © 2011-2022 走看看