这个问题有点冗长,但我希望你能明确了解发生了什么...
我正在为我们公司构建一个任务管理器桌面应用程序(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"]
拖放重新排序为["4", "1", "2", "3"]
时,实际上得到的是["3", "4", "1", "2"]
。 任务会移动和更新(因为上面的Dragula / PouchDB代码)。 奇怪... 我在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"]
。
_.sortBy
函数,则任务在被拖放后保持不变(尽管它们一开始就是无序的)。任务移动到所需位置并具有所需的顺序号。我还发现,如果禁用PouchDB的
.put()
,并使_.sortBy
正常工作,它也可以正常工作,但数据不会写入服务器,并且顺序号不会因此更新。也许我只是盯着这段代码看了太久,但我无法弄清楚为什么任务会跳来跳去。 有人有什么想法吗?
谢谢您的帮助!