会话存储在获取时是否有延迟？

Question

在我的反应代码中，在一个组件内，我正在从会话存储中获取一个值（在 useEffect 钩子内）。当控制台打印时，它显示值。但是在 render（或 return 方法）内部，它没有刚刚获取的值。从会话存储中获取时是否有延迟？

在状态中存储相同内容并在渲染中获取后解决了这个问题！

let myValue = '';
useEffect(()=>{
    myValue = sessionStorage.getItem("someKey");
},[]);
// In the return method
return {
    <div>{myValue}</div>
}

为什么从会话存储中获取的值不能立即在渲染中使用？

Answer 1

不，localStorage 和 sessionStorage 调用都是 sync 您看不到渲染中的值，因为视图不是 re-rendered。您必须设置状态，获取新道具或强制渲染器才能看到它。

如何在挂钩中强制更新

const [, updateState] = React.useState();
const forceUpdate = useCallback(() => updateState({}), []);

Answer 2

立即可用

return {
    <div>{sessionStorage.getItem("someKey")}</div>
}

Answer 3

否，所有 sessionStorage 调用都是 synchronous。

Answer 4

这里的问题是您期望变量值更改会触发 re-render。 React 不会以这种方式工作，如果你想更改一个值并让它 re-render:

，你将需要另一种方法

考虑：

const [myValue, setMyValue] = useState('');

useEffect(()=>{
   setMyValue(sessionStorage.getItem("someKey"));
},[]);

// In the return method
return {
    <div>{myValue}</div>
}

会话存储在获取时是否有延迟？

Does session storage have a delay while fetching?

javascript

storage

session-storage

reactjs

react-hooks