react 如何最好的实现对列表的增删操作？

我现在在做一个题库项目，一个题库可以对应数道题目，数量多时应该可以是几千上万道题。现在的搭配是 react+redux+antdesign 在设计这个后台管理系统。但是有一点我想请教一下各位。比如说，在为题库新添加题目时，是怎么样个流程比较合适，我有两个想法：

一、

1 、添加 /删除题目，客户端发起一个请求，服务端处理完毕返回。

2 、待返回后，客户端再发起一个请求，请求返回所有题目的新数据，以此新数据来更新客户端列表。

二、

1 、添加 /删除题目，客户端发起一个请求，服务端处理完毕返回。

2 、由客户端将新添加的数据插入（删除）到原数据中，以此起到更新数据的作用。

第一种要发起两个请求才能完成一件事，第二种只要一个请求，但实现起来有点麻烦。

麻烦就麻烦在于，如何插入，以及如何删除列表中指定的数据。

我本来是这样写的：

 handlerOk = (sourceData) => {
    if ( typeof(sourceData) !== "undefined") {
           //此处为一个 redux action
            this.props.setQuestions(this.props.questions.concat(sourceData));
    }
}

this.props.questions  为原始数据 
sourceData 为新添加的数据项
都为对象列表
[{id:1,name"test1"},  {id:2,name"test2"},  {id:3,name"test3"},   ]

以上代码确实可以在不请求服务器的情况下更新数据到原始数据中。但是有一个问题，就是插入的数据如果与原始数据项有重复项的时候，是会报错的，因为我采用 id 为 key ,而 key 在渲染时有重复是会报错的。而如果要排除重复项，因为是对象列表， indexOf 似乎是无效的。只能一个一个遍历对比，感觉这样下来，如果数据量大的时候，应该相当费力。

以前使用 jquery 时，直接操作 dom 虽然粗暴却很容易。现在使用 react ，感觉不太适应。请各位指点一下，我的需求就是说：一个展示列表，有一个新增按钮，删除按钮，当新增时，可以把新添加的数据项更新到列表中，而不用发起请求刷新全部数据。

elone

2017-03-27 11:17:25 +08:00

id 为数据库的 id 。关于重复 id 的事情也许是我的设计问题吧。有一个列表 A ，展示已关联的题目，（比如此时有列表项{id:1}{id:2}），有一个新增按钮，点击后出现所有题目列表以待选择，选择后如上所说，将新选择的题目更新到列表 A 中，如果不幸还选择了 id 为 1 的选项，当返回给列表 A 时就会出现重复的问题了。

不过这应该是我设计上的缺陷吧，应该在所有列表中禁用已关联的题目，使其不能选择。只不过似乎又要遍历才能对比出哪些题目已关联。

手机码字，不知道是否有表达清晰，😂