使用ant设计动态表格的警告信息

Question

我正在使用 ant 设计动态表格，如下所示： https://codesandbox.io/s/wsuv8 。 我也使用div标签分隔了表单项，例如：

 <div className="my-div"> <Form.Item {...field} name={[field.name, "first"]} fieldKey={[field.fieldKey, "first"]} rules={[{ required: true, message: "Missing first name" }]} > <Input placeholder="First Name" /> </Form.Item> </div> <div className="my-div"> <Form.Item {...field} name={[field.name, "last"]} fieldKey={[field.fieldKey, "last"]} rules={[{ required: true, message: "Missing last name" }]} > <Input placeholder="Last Name" /> </Form.Item> </div>

当我在我的项目中添加新输入时，单击Add field按钮，我会收到下一个警告：

 Encountered two children with the same key, `0`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

当我删除输入之间的div标签时，此警告消失。

例如，我现在在忘记为map()中的项目设置key时会出现此警告，但在我的情况下，键是为包装整个表单的组件设置的：

 <Space key={field.key} // the key is set here style={{ display: "flex", marginBottom: 8 }} align="start" >

问题：如果在<Space>组件中设置了key，为什么会出现警告以及如何解决这个问题？

Answer 1

您应该使用 object 解构获取名称和密钥并获取...restFields，然后将 restFields 传播到 formItem

{fields.map(({ key, name, ...restField }, index) => (
   <Form.Item
    {...restField}
    name={[name, 'columnName']}
   />
   ....
   ....
   ....
)}