怎么设置这里的key值

clipboard.png

项目里用了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>

            );
        });

clipboard.png

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

= =

阅读 2.1k
1 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题