antd表格添加数据不更新_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 ，感觉不太适应。请各位指点一下，我的需求就是说：

一个展示 列表，有一个新增按钮，删除按钮，当新增时，可以把新添加的数据项更新到列表中，而不用发起请求刷新全部数据。