[英]useEffect with callback not updating state
我正在尝试重新渲染组件,以在用户阻止或允许其位置已知时(通过单击Chrome浏览器地址左侧的信息图标)来隐藏或显示“使用当前位置”按钮。 我对为什么下面第一个示例起作用(例如,更改权限后立即适当切换按钮)为何感到困惑,但第二个却没有(需要刷新)。
我试图通过简单地定义常量hasPermission
来删除重复的permission.state !== 'denied'
。
另外,我不清理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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.