Javascript 具有回调的useEffect未更新状态

我正在尝试重新渲染组件，以便在用户阻止或允许知道其位置时隐藏或显示“使用当前位置”按钮（通过单击Chrome浏览器地址左侧的信息图标）。我完全搞不懂为什么下面的第一个示例可以工作（即，一旦权限更改，按钮就会适当地切换），而第二个则不行（它需要刷新）

我正试图删除重复的

permission.state！='通过简单地定义常量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=（）=>sethaspmission（haspmission）

时，您将创建一个事件侦听器，该侦听器将始终使用相同的值调用

sethaspmission

：permission.state！='拒绝“已在上面保存

在第一个示例中，它之所以有效，是因为

permission.state！='拒绝“

在事件回调中计算

够清楚吗

---

对于清理，

useffect

可以返回一个函数，该函数将在组件卸载时调用。请检查wrt cleanup:addEventListener定义了一个事件监听器，我会在cleanup中删除EventListener，但在这种情况下如何操作，例如，这是否可行：

permission.onChange=null

我从未使用过权限，但我相信将其设置为null会如预期的那样工作。根据，还可以使用addEventListener语法，从而使用removeEventListener将其删除。这两种方法都应该没有副作用，但我不是100%确定。