ReactJS组件呈现错误的顺序

Question

这个问题有些冗长，但我希望您确切了解正在发生的事情...

我正在为我们公司使用任务管理器桌面应用程序（Electron），并且发生了奇怪的现象。任务管理器有6列（每位员工一个），并包含要完成的垂直任务列表。它具有拖放功能，因此您可以对任务进行排序。

我正在使用Dragula处理拖放部分，然后按从上到下的顺序收集所有任务的ID号，并将它们存储在数组中。

我正在使用PouchDB更新数据库并同步其他正在运行的应用程序。

对于Dragula / PouchDB，我正在使用以下代码：

var containers = [];
containers.push(ReactDOM.findDOMNode(this.refs.taskContainer));

var drake = Dragula(containers);
drake.on('drop', function(el, target, source, sibling) {

  // Get Desired Order of IDs
  for(i = 0; i < source.children.length; i++) {
    ids.push(source.children[i].id);
  }

  // Loop through IDs, write an "order" to tasks in PouchDB Database ("TaskData").
  // TaskData's replication is "live" so it automatically syncs to the DB.
  for(i = 0; i < ids.length; i++) {
    TaskData.get(ids[i]).then(function(doc) {   
      doc.order = ids.indexOf(doc._id);
      TaskData.put(doc).catch(function(err) {
        console.log(err);
      });
    });
  }

});

至此，我的TaskData现在有了一个带有所需值的新“ order”键。现在，我需要渲染ReactJS组件-按顺序。

从道具中获取任务（从TaskData中刷新）并过滤出所需的内容：

var tasks = this.props.tasks.filter(function(task) {
  if(task.archive !== 1) {
    return true
  }
});

然后我按照上述订单号对任务进行排序（使用lodash.js），并将排序后的数据映射到React Components：

tasks = _.sortBy(tasks, 'order').map(function(task) {
  return <Task key={task.id} order={task.order} ...more props />
});

很好，我的任务按顺序呈现，并且一切看起来都很好。

现在，问题...

当我拖放以将任务从["1", "2", "3", "4"]重新排列为["4", "1", "2", "3"]时，实际上得到了["3", "4", "1", "2"]。任务移动和更新（由于上面的Dragula / PouchDB代码）。很奇怪...我输入开发工具location.reload()，并且令我惊讶的是，现在按照我最初想要的顺序对任务进行了排序：["4", "1", "2", "3"]。

[再次尝试，我将任务从["1", "2", "3", "4"]移至["1", "3", "2", "4"]，任务重设回["1", "2", "3", "4"]。同样，location.reload()和任务现在也已排序：["1", "3", "2", "4"]。

[在尝试调试此功能时，我发现如果禁用_.sortBy功能，则在删除任务后，这些任务将保持原样（尽管开始时它们是混乱的）。任务将移动到所需位置并具有所需订单号。

[我还发现，如果我禁用PouchDB .put()，并使_.sortBy正常工作，它也可以工作，但是数据不会写入服务器，因此订单号也不会更新。

也许我只是盯着代码太久了，但是我无法弄清为什么这些任务会跳来跳去。有人有什么想法吗？

感谢您的帮助！

Answer 1

我通过实施uuid设法使我的工作正常进行。以下是以下代码段：