时间戳

首页 > 解决方案 > (React.js) 如何获取localStorage的当前值？

javascript - (React.js) 如何获取localStorage的当前值？

问题描述

我正在尝试使用反应挂钩同步本地存储和状态，但即使我设置了 a ，我也无法获得正确的值setTimeout()，

例如，我试图在数组中保存一个新键，如果我直接打印状态或本地存储，我仍然会得到以前的状态，但是如果在组件返回后打印状态，我会得到正确的价值，我该怎么做？

像这样我仍然得到以前的状态，

const onSave = () => {
 setState(prevState => [...prevState, {...newState}])            
 localStorage.setItem('localState', JSON.stringify(state)) ;          
 console.log(JSON.parse(localStorage.getItem('localState')))   <--  //still getting the previous state :(
}

但是如果我做这样的事情，那么我会得到正确的值，但是我无法正确设置本地存储，或者我可以吗？

const App = (props) =>{
 const onSave = () =>{
  setState(prevState => [...prevState, {...newState}])            
  localStorage.setItem('localState', JSON.stringify(state)) ; 
 }
 return(
 <div>
  { console.log(JSON.parse(localStorage.getItem('localState'))) }  <<-- correct state, wrong place
</div>
 )  
}

感谢你们！

标签： javascriptreactjslocal-storage

解决方案

setState函数是异步的，因为您立即将数据保存到本地存储，它正在保存旧状态本身

尝试将您的功能更改为

const onSave = () =>{
  setState(prevState => [...prevState, {...newState}])            
}
useEffect(() => {
  localStorage.setItem('localState', JSON.stringify(state)) ;          
  console.log(JSON.parse(localStorage.getItem('localState'))) 
}, prevState)

推荐阅读