代码之家 › 专栏 › 技术社区 › shauna vayne

跨组件的可变存储更新

use-state next.js react-router reactjs javascript

shauna vayne · 技术社区 · 4 年前

这是下一个项目。文件夹结构:

components > Navbar.js

pages > index.js (/ route)(includes Navbar)
      > submitCollection.js (/submitCollection)(includes Navbar)

我试图让用户提交一个特定的字符串作为输入,并将其存储在account变量中。导航栏。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 回复 | 直到 4 年前

Icekid 4 年前

你可以使用 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)
    }

希望有帮助

Andrei Stoica 4 年前

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 ,因此每次调用它时,我们都会更新本地存储。

你也可以用这个逻辑创建一个定制的钩子,这样组件看起来会更干净。或者更好,使用 use-state-persist

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前