ReactJS组件呈现错误的顺序

这个问题有点冗长，但我想让你确切地了解发生了什么

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

我将使用来处理拖放部分，然后收集所有任务的ID号，从上到下依次，将它们存储在一个数组中

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

对于Dragula/PockDB侧，我使用以下代码：

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);
      });
    });
  }

});

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

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

tasks=\.sortBy（任务，'order'）.map（函数（任务）{
返回
});

太好了，我的任务被安排得井然有序，一切看起来都很好

现在，问题…

当我拖放将我的任务从

[“1”、“2”、“3”、“4”]

重新排序到

[“4”、“1”、“2”、“3”]

时，我实际上得到了

[“3”、“4”、“1”、“2”]

。任务移动和更新（因为上面的Dragula/PockDB代码）。奇怪的我输入了Dev Tools

location.reload（）

，令我惊讶的是，任务现在按我最初想要的顺序排列：

[“4”、“1”、“2”、“3”]

再次尝试，我将任务从

[“1”、“2”、“3”、“4”]

移动到

[“1”、“3”、“2”、“4”]

，任务将重置回

[“1”、“2”、“3”、“4”]

。同样，

location.reload（）

任务现在已排序：

[“1”、“3”、“2”、“4”]

在尝试调试时，我发现如果禁用

\uu.sortBy

功能，任务在被删除后会保持不变（尽管它们一开始就不正常）。任务移动到所需位置并具有所需的订单号

我还发现，如果我禁用PockDB

.put（）

，并保持

..sortBy

工作，它也可以工作，但数据不会写入服务器，订单号也不会因此更新

也许我只是盯着代码看了太久，但我不明白为什么任务会跳转。有人有什么想法吗

---

谢谢你的帮助

我通过实现

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>

//导入代码
从“uuid”导入uuid；
//我的虚拟组件

{messages.map（{value，signature}）=>(
))}

查看这些注释，了解有关实现的更多信息。

这是我的荣幸。帮助我解决问题，请参阅答案

---

Happy coding=）

可能是Yes的重复，它非常相似。希望我们中的一个人能得到一个答案，因为这可能会帮助另一个人。是的，这与我的帖子非常相似。从我所看到的一致性是使用dragula、对项目进行排序以及重新呈现组件。问题：您没有将重新订购的物品保存到状态，是吗？您只需获得一个任务列表，然后对新组件进行排序/映射，对吗？@BDUB我已经尝试了很多次来解决这个问题。有一种方法涉及到获取任务属性、修改顺序并将其存储为状态，但我也没有运气。目前，正如我上面的代码所演示的，我得到了传递下来的tasks属性，然后修改了顺序，并将组件映射到render函数中。理想情况下，我会将这些组件移动到单独的函数中，但我会首先尝试让组件发挥功能。@Phillips 126请检查以下内容：。我有一个很好的预感，德拉古拉的反应和反应并不配合得很好。可能是这样的，dragula会在react在drop事件中呈现组件后重新排序项目。我正在寻找一条线索：在drop事件中执行所有数据操作，然后在dragend事件中执行渲染，以确保dragula不再掌握在cookie jar中。我会让你知道的。

// 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>