请教一个列表新增删除设计上的问题

#1

我现在在做一个题库项目，一个题库可以对应数道题目，数量多时应该可以是几千上万道题。
现在的搭配是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，感觉不太适应。请各位指点一下，我的需求就是说：
一个展示 列表，有一个新增按钮，删除按钮，当新增时，可以把新添加的数据项更新到列表中，而不用发起请求刷新全部数据。

#2

说到底你碰到的问题只是id重复了而已。
且不说key的问题，照正常情况，id这种东西是不能重复的。

  1. 如果同一个题能添加两次，给不同的id就行了，实际上并不是一样的数据了。
  2. 如果不能添加两次，后端就不应该添加成功而是报错。
  3. 如果你硬是后端添加成功了，还要合并数据，lodash的uniqBy就行，自己写也没什么难度，这个算法的复杂度，对比你的react渲染耗费时间是可以忽略不计的。
function uniqBy(data){
  var dataInclude = {};
  var arr = [];
  data.forEach(item => {
    if (!dataInclude[item.id]) {
      arr.push(item);
      dataInclude[item.id] = true;
    }
  });
  return arr;
}
1 Like
#3

谢谢。我明白了。

#4

(ノへ￣、)捂脸 ， 哪里有算法。

#5

。。。。。。。不拆