使用效果与回调不更新状态

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