这个问题有点啰嗦,但我想让你明白究竟发生了什么......
我正在构建一个任务管理器桌面应用程序(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组件 - in order .
从props获取任务(从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 />
});
很棒,我的任务按顺序呈现,一切看起来都很好 .
Now, the problem...
当我拖放以将我的任务从 ["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
工作,它也可以工作,但数据不会写入服务器,并且订单号不会因此而更新 .
也许我刚刚盯着代码太长时间了,但我无法弄清楚为什么这些任务正在蹦蹦跳跳 . 有人有主意吗?
谢谢你的帮助!