Question

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

将状态存储在状态中并在render中获取后解决了该问题！

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

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

Answer 1

这里的问题是，您期望变量值更改会触发重新渲染。 React无法以这种方式工作，如果您想更改值并重新呈现它，则需要另一种方法：

考虑：

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

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

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

Answer 2

否，localStorage和sessionStorage调用均为sync 您不会在渲染中看到该值，因为该视图未重新渲染。您必须设置状态，获取新的道具或强制渲染器看到它。

如何在挂钩中强制更新

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

Answer 3

立即可用

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

Answer 4

否，所有sessionStorage调用都是synchronous。

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

4 个答案: