React渲染列表时数据和页面不匹配

新接触react和antd，遇到一个问题，请教各位：

使用antd 渲染一个列表，数据就是一个基本的数组加对象，如下：
[{key : '', ...other}, ...other];
以上列表数据属于整个页面数据结构的一部分，嵌套比较深（不知道是不是这个原因）；
模块渲染代码片段：

...
 {
pageData.list.map((item, index) => {
    return <div key={item.key}>
        <Form.Item name='' initialValue={item.key}>
            <Input/>
        </Form.Item>
...

交互可以新增或删除一个列表项。

现在的问题是：

1，不管删除上图三个中的任何一个，页面渲染的结果都是删除最后一个，但是输出列表数据排查，删除后更新的数据确是正确的，也就是数据和页面渲染对不上；
2，删除后点击新增，新增出来的永远是刚才被删除的那一条，（列表中数据的key = Date.now()，所以理论上新增一条key应该是当前时间，但实际上确是被删除的那一条的key）；

删除和新增操作遵循了不可变数据原则，具体更新步骤为：1,拷贝整个页面数据（JSON.parse(JSON.stringfy())），2,更新为新删除或新增后的数据，3,setState;

另外页面模板存在多级嵌套，数据都有全局unique key，类似

return (
  ......
  pageData.data1.map(item1 => (
   ...
     pageData.data2.map(item2 => ( ... ))
   ...
  ))
)

以上，有劳各位

看截图不太好看出来，由小到大的排查吧。
写静态数据进行测试
你觉得是嵌套的问题。那就直接写一个简单的list然后渲染截图的那个dom，新增删除是否有问题
如果没问题一步步的放开更多的dom和逻辑。

数据结构看一下，删除和新增的代码看一下
这个可以用Form.List

之前我也有过这种情况 可能是你数据一开始的key唯一值不对，影响了后边的数据。这是个思路 你可以排查一下，先一层一层打印，看是哪个步骤导致的吧