Mobx和React异步函数调用正在冻结UI,而onClick调用没有



所以我们已经试着解决这个问题好几个小时了,但还不知道问题出在哪里。由于公司政策的原因,恐怕我不能包含任何代码,但我可以包含一个带有解释的示例代码。

基本上,我们有一个从控制器中选择所有表行的函数(简化(。示例:

selectAllRows = action(() => {
this.data.forEach(r=> {
this.selectTableRow(r, tableInstance)
})
})

selectTableRow只是一个简单的函数,它将值设置为一个可观察的对象:

selectTableRow = action((row, tableInstance) => {
tableInstance.multiSelectedRows[row.id] = row.id
})

因此,当我们有100行,我们通过调用一个按钮并通过onClick方法调用selectAllRows函数来进行选择时,或者如果我们在componentDidMount生命周期中直接调用它,那么表行会立即被选中,没有问题-都很好。

一旦这个函数从其他地方被调用,我们就可以说是从esc键监听器调用它,还是用setTimeout函数包装它。一旦该函数被执行,它就会挂起UI一秒钟或2秒钟,然后选择正常的行——呈现问题,问题未知。

所以问题是,我们无法理解为什么同一个函数在被直接调用时工作良好,而在被封装在异步函数中时却没有。

如果有任何提示或有人认识到问题并能帮助我们,我们将不胜感激!

编辑:还要注意的是,我们从函数中删除了所有的动作包装,并进行了相同的测试,这是相同的问题。onClick调用执行得很快,另一个执行得很慢。

我们设法通过更新所有库来解决问题(无论如何,我们每两周更新一次(,但这似乎是mobx的问题,因为在mobx更新后,它解决了这个问题。

最新更新