javascript - 带回调的 useEffect 不更新状态

Question

我正在尝试重新呈现组件以在用户阻止或允许知道其位置时隐藏或显示“使用当前位置”按钮(通过单击浏览器地址左侧的信息图标 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)
    })
}, [])

Answer 1

基本上，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