javascript - 怎么设置这里的key值

问题描述

问 题

项目里用了ant-design
问题：红色框框是点击新增以后出来的表单

对应的 我应该怎么设计这个返回的表单的k值？也没办法包在一个父级的话= =

        const keys = getFieldValue('keys');
        let _title = actionType != "edit" ? "新增属性" : "编辑属性";
        const formItems = keys.map((k, index) => {
            return (
                <div>
                <FormItem
                  label= {'属性名'}
                  required={false}
                  key={k}
                  style={{ width:'50%', display:'inline-block'}}
                >
                  {getFieldDecorator(`names-${k}`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                      required: true,
                      whitespace: true,
                      message: "请输入属性名称",
                    }],
                  })(
                    <Input placeholder="请输入属性名称" style={{ width: '60%', marginRight: 8 }} />
                  )}
                </FormItem>
                <FormItem
                  label= {'属性名'}
                  required={false}
                  key={index++}
                  style={{ width:'50%', display:'inline-block'}}
                >
                  {getFieldDecorator(`names-${k}`, {
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [{
                      required: true,
                      whitespace: true,
                      message: "请输入属性名称",
                    }],
                  })(
                    <Input placeholder="请输入属性名称" style={{ width: '60%', marginRight: 8 }} />
                  )}
                  {keys.length > 0 ? (
                    <Icon
                      className="dynamic-delete-button"
                      type="minus-circle-o"
                      disabled={keys.length === 0}
                    />
                  ) : null}
                </FormItem>                    
                </div>

            );
        });

我这里用k和index++。。。，

= =

解决方案

这个是 react 在开发环境下会报的一个 warning ，目的是给循环的元素一个唯一索引，进而判断元素是否需要更新。

在你的代码中，把这个 key 加到最外层的 div 上，就可以了。

这篇关于javascript - 怎么设置这里的key值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！