当用户阻止或允许知道其位置时,我试图重新渲染组件以隐藏或显示“使用当前位置”按钮(通过单击浏览器地址左侧的信息图标铬)。我对为什么下面第一个示例起作用(即,更改权限后立即适当切换按钮)为什么却第二个却没有(需要刷新)感到困惑。
我试图通过简单地定义常量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)
})
}, [])
答案 0 :(得分:1)
基本上,permission.onchange
仅定义一次。
因此,在第二个示例中,当您定义permission.onchange = () => setHasPermission(hasPermission)
时,您将创建一个事件监听器,该监听器将始终以相同的值调用setHasPermission
:{{ 1}}保存在上方。
在您的第一个示例中,它有效,因为在事件回调中对permission.state !== 'denied'
进行了评估。
足够清楚吗?
为了进行清理,permission.state !== 'denied'
可以返回一个在卸载组件时将调用的函数。请检查https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1