我正在尝试重新渲染组件,以在用户阻止或允许其位置已知时(通过单击Chrome浏览器地址左侧的信息图标)来隐藏或显示“使用当前位置”按钮。我对为什么下面第一个示例起作用(即,在更改权限后立即正确切换按钮)为什么感到困惑,但是第二个却没有(需要刷新)。
我试图permission.state !== 'denied'
通过简单地定义常量来删除重复项hasPermission
。
另外,我不清理onchange侦听器。我该怎么做呢?我可以只分配为null还是删除属性?
作品:
useEffect(() => {
navigator.permissions.query({ name: 'geolocation' }).then(permission => {
setHasPermission(permission.state !== 'denied')
permission.onchange = () =>
setHasPermission(permission.state !== 'denied')
})
}, [])
不起作用:
useEffect(() => {
navigator.permissions.query({ name: 'geolocation' }).then(permission => {
const hasPermission = permission.state !== 'denied';
setHasPermission(hasPermission)
permission.onchange = () =>
setHasPermission(hasPermission)
})
}, [])
基本上permission.onchange
只定义一次。
因此,在第二个示例中定义时,permission.onchange = () => setHasPermission(hasPermission)
您将创建一个事件侦听器,该事件侦听器将始终setHasPermission
使用相同的值进行调用:permission.state !== 'denied'
上面保存的结果。
在第一个示例中,它起作用是因为permission.state !== 'denied'
在事件回调中对其进行了评估。
很清楚吗?
为了进行清理,useEffect
可以返回一个函数,在卸载组件时将调用该函数。请检查https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句