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使我的工作正常。下面是一个片段：

// Import the code
import uuid from 'uuid';
// My dummy component
<Messages>
  <ul>
    {messages.map(({ value, signature }) => (
      <Message 
        value={value}
        key={uuid.v4()} // use the uuid as the unique key
        from={signature}
        onMessageRecieved={this.handleMessageRecieved} />
    ))}
  </ul>
</Messages>

查看这些注释以了解有关实现的更多信息。https://survivejs.com/react/getting-started/implementing-notes/

为这个链接向@Alf致敬。帮助我解决了问题，请参阅@Dmitri Zaitsev的回答。

快乐编码=）