3

这个问题有点啰嗦,但我想让你确切地了解正在发生的事情......

我正在构建一个任务管理器桌面应用程序(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 组件。

从 props 中获取任务(从 TaskData 刷新)并过滤掉需要的内容:

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

然后,我按上述订单号(使用 lodash.js)对任务进行排序,并将排序后的数据映射到 React 组件:

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

太好了,我的任务按顺序呈现,一切看起来都很好。

现在,问题...

当我拖放以将我的任务从["1", "2", "3", "4"]to重新排序时["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工作,它也可以工作,但数据不会写入服务器,因此订单号不会更新。

也许我只是盯着代码太久了,但我无法弄清楚为什么任务会跳来跳去。有人有想法么?

谢谢你的帮助!

4

1 回答 1

0

我设法通过实施让我的工作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 的回答。

快乐编码 =)

于 2020-05-14T00:49:51.920 回答