我如何在useCallback（react hook）中获取useState值

Question

我无法获取 useCallback 内部的 useState 值。当我运行下面的代码时，

import React, { useCallback, useEffect, useRef, useState } from 'react';

const DBLab = () => {
    const [hashHistory, setHashHistory] = useState("initial_value");
    const [inputValue, setInputValue] = useState("");
    const didAuthMountRef = useRef(false);

    const set = useCallback(() => {
        const decodeHash = decodeURI(window.location.hash);
        console.log();
        console.log("decodeHash: " + decodeHash);
        console.log("hashHistory: "+ hashHistory);
        setHashHistory(decodeHash);
    },[hashHistory]);

    useEffect(() => {
        const startFunc = async() => {
            set();
            window.addEventListener('hashchange', set);
            didAuthMountRef.current = true;
        }
        if(!didAuthMountRef.current) {
            startFunc();
        }
    }, [set]);
    return (
        <div>
            <h1>dblab</h1>
            <h1>{hashHistory}</h1>
            <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)}/>
        </div>
    )
}

export default DBLab;

在网络控制台中，我明白了

decodeHash: #/dblab#first

hashHistory: initial_value

这是正确的。但是当我将 url 更改为 http://localhost:3000/#/dblab#next 时，我得到了

decodeHash: #/dblab#next

hashHistory: initial_value

这是错误的。因为 hashHistory 没有改变。但这不是 useState 问题。因为我在屏幕上看到的带有

<h1>{hashHistory}</h1>

的 hashHistory 是

#/dblab#next

，这是正确的哈希值。

我怎样才能在useCallback中获得正确的hashHistory？.

ps。我必须使用

useCallback

。

Answer 1

useEffect(() => {
    const startFunc = () => {
        if(!didAuthMountRef.current) {
            set();
            didAuthMountRef.current = true;
        }
        window.addEventListener('hashchange', set);
    }
    startFunc();
    return ()=> {
        window.removeEventListener('hashchange', set);
    }
}, [set]);

逻辑问题

Answer 2

不确定这是否有效，但您也可以尝试将 window.location.hash 添加到 useCallback 依赖项中，这意味着如果 window.location.hash 更改，useCallback 函数也会刷新：

    const set = useCallback(() => {
    const decodeHash = decodeURI(window.location.hash);
    console.log();
    console.log("decodeHash: " + decodeHash);
    console.log("hashHistory: "+ hashHistory);
    setHashHistory(decodeHash);
    },[hashHistory, window.location.hash]);