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

【问题标题】：Does session storage have a delay while fetching?会话存储在获取时是否有延迟？
【发布时间】：2019-06-24 10:37:27
【问题描述】：

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

将相同的内容存储在状态中并在渲染中获取后绕过了问题！

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

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

【问题讨论】：

从 'useEffect' 设置私有变量不会导致重新渲染。您可能需要考虑使用useState，以便您拥有设置值和注册重新渲染的机制。
是的！这就是我绕过问题的方法。

标签： javascript reactjs storage react-hooks session-storage

【解决方案1】：

这里的问题是您期望变量值更改会触发重新渲染。 React 不能这样工作，如果你想改变一个值并让它重新渲染，你需要另一种方法：

考虑：

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

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

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

【讨论】：

【解决方案2】：

不，localStorage 和 sessionStorage 调用都是 sync 您看不到渲染中的值，因为视图没有重新渲染。你必须设置一个状态，获取一个新的道具或强制渲染看到它。

如何在挂钩中强制更新

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

【讨论】：

【解决方案3】：

立即可用

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

【讨论】：

【解决方案4】：

不，所有 sessionStorage 调用都是synchronous。

【讨论】：