跨react组件的可变存储更新
跨react组件的可变存储更新
提问于 2022-04-17 11:46:53
这是下一个/反应项目。文件夹结构：
components > Navbar.js
pages > index.js (/ route)(includes Navbar)
> submitCollection.js (/submitCollection)(includes Navbar)我试图让用户提交一个特定的字符串作为输入，并将其存储在帐户变量中。Navbar.js
const Navbar = ({}) => {
const [account,setAccount] = useState()
const handleClick = () => {
setAccount(randomNumberThatIHaveGenerated)
}
...
return (
<Link href="/">home</Link>
<Link href="/submitCollection">submit collection</Link>
...
<button onClick={handleClick} >press to set account</button>
...
{account?(<p>{account}</p>):(<p>u need to set an accout</p>)}
)
}当我访问家庭使用导航栏链接，帐户再次设置为未定，我需要再次按下按钮，以设置它。怎样才能使字符串保持不变。就像坚持在肚脐上
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-04-17 12:16:27
您可以使用localstorage和useEffect解决这个问题。
将这段代码添加到您的工作中就可以了。
const [account,setAccount] = useState(localStorage.getItem('account') ?localStorage.getItem('account') : null)
useEffect(()=>{
localstorage.setItem(account)
},[account])例如
const [account,setAccount] = useState(localStorage.getItem('account') ?localStorage.getItem('account') : null)
useEffect(()=>{
localStorage.setItem('account',account)
},[account])
const handleClick = () => {
setAccount(randomNumberThatIHaveGenerated)
}希望它能帮上忙
Stack Overflow用户
发布于 2022-04-17 11:57:43
useState不是持久的，它绑定到它的组件上，为了使它持久，您必须使用localStorage。
const [account,_setAccount] = useState();
const setAccount = (val) => {
_setAccount(val);
localStorage.setItem('account', val);
}
useEffect(() => {
const storedAccount = localStorage.getItem('account');
if (storedAccount) _setAccount(storedAccount);
}, [])
const handleClick = () => {
setAccount(randomNumberThatIHaveGenerated)
}组件呈现时调用useEffect，检查存储帐户并显示它。
注意我们是如何重新实现setAccount的，这样每次调用它时，我们都会更新localStorage。
您还可以使用这个逻辑创建一个自定义钩子，这样组件看起来就更干净了。或者更好的是，使用类似于使用状态持久化的东西
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71904945
复制相关文章
相似问题
如何在React中存储跨组件的可变状态
跨组件更新React配置
跨组件更新上下文-react.js
REACT使用本地存储来更新组件
更新存储后，React中的useEffect未更新组件
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
