antd v4 一个页面多个表单 动态添加删除

Question

使用antd v4一个页面动态添加删除多个表单的问题

具体代码以及复现步骤，可点击查看：https://stackblitz.com/edit/react-v8vobb?embed=1&file=index.js
代码：

import React, { Component } from "react";
import { render } from "react-dom";
import { Button, List, Form, Input } from "antd";
import "antd/dist/antd.css";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  addForm = () => {
    const { data } = this.state;
    data.push({});
    this.setState({ data: [...data] });
  };

  removeForm = index => {
    const { data } = this.state;
    data.splice(index, 1);
    this.setState({ data: [...data] });
  };

  renderItem = (item, index) => {
    return (
      <List.Item
        actions={[
          <Button
            key="list-delete"
            type="link"
            size="small"
            danger
            onClick={() => this.removeForm(index)}
          >
            删除
          </Button>
        ]}
      >
        <Form layout="inline" name={`user${index}`}>
          <Form.Item name="id" require>
            <Input placeholder="请输入id" />
          </Form.Item>
          <Form.Item name="name" required>
            <Input placeholder="请输入名称" />
          </Form.Item>
        </Form>
      </List.Item>
    );
  };

  render() {
    const { data } = this.state;
    return (
      <div style={{ padding: 10 }}>
        <Button type="primary" onClick={this.addForm}>
          添加表单
        </Button>
        <List dataSource={data} renderItem={this.renderItem} />
        <h5>步骤：</h5>
        <ul>
        <li>首先点击添加表单三次，添加三个表单</li>
        <li>其次在输入框中分别输入不同的内容</li>
        <li>点击第二个表单右侧的删除按钮</li>
        <li>最后你会发现删除后的表单二的输入值，不是原本之前的第三个表单输入的值，而是依然是之前原本第二个表单的值。</li>
        <li>那么我要怎么做，才能让剩下的第二个表单的值是删除前第三个表单的值</li>
        </ul>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

1. 初始没有表单
   
2. 点击添加表单三次，添加三个表单
   
3. 在输入框中分别输入不同的内容
   
4. 点击第二个表单右侧的删除按钮，结果如下：
   

结果是多三个表单的值5，6不见了。
我要怎么做，才能让剩下的第二个表单的值是删除前第三个表单的值?

Answer 1

修正的例子在这里：https://stackblitz.com/edit/r...

主要原因

1）列表循环的key问题，查了antd的List组件，没有地方可以设置key值，所以猜应该是在List.Item或它的子元素去设置，尝试后后面是对的

2）表单值的还原问题。按正常来讲，data没变，应该不会重新渲染。但尝试过后不行，所以在form值变化时更新state，然后再通过initialValues赋值回去。

第2个问题看上去其实挺奇怪的，这不就证明了List的Datasource一旦变化，所有项的form组件都重新渲染一次吗？没时间去看antd相关组件的源代码，先能解决问题先，就这样吧。