【发布时间】:2021-08-05 07:41:22
【问题描述】:
我无法获得 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。
【问题讨论】:
-
一方面,您没有正确清理该事件侦听器。您可能想使用一个为您正确执行操作的钩子,例如github.com/streamich/react-use/blob/master/docs/useHash.md
-
@AKX 哇。什么文件!谢谢!
标签: reactjs react-hooks use-state usecallback