当组件卸载时,在组件状态下具有回调引用会导致错误

时间:2019-03-02 17:17:45

标签: javascript reactjs react-masonry

我在我的项目中使用react-masonry-component库,遇到一个问题,当网格中元素的尺寸发生变化时,网格无法自我调整。这将导致重叠和普遍草率。一些谷歌搜索使我找到了解决方案。在组件状态内创建一个回调函数,然后将组件的ref设置为等于以下回调函数。有问题的回调函数如下:

function(c) {this.masonry = c.masonry;}.bind(this)

有了这个,我就可以将以下行添加到调整元素大小的函数中,现在砌体网格就像一个吊饰一样工作:

this.masonry.layout();

但是,这导致了一个新问题。现在,每当我离开组件时,都会收到以下异常:

TypeError: Cannot read property 'masonry' of null

因此,我的组件正在卸载,并尝试将其状态变量设置为等于由于要卸载/卸载而不再存在的属性。

我能想到的最简单的解决方案是在函数包装成类似以下内容时添加某种条件:

if (c !== null) { execute function }

但是,我不完全理解语法/初始回调中发生的事情,到目前为止,我为干预它所做的任何努力都已完全破坏了它。

所以我的问题确实分为两部分,首先是代码行中实际发生的事情

function(c) {this.masonry = c.masonry;}.bind(this)

第二,有没有办法我可以修改该行为,以便在组件卸载时不再抛出异常?

谢谢

0 个答案:

没有答案