跨 React 组件的变量存储更新

Question

这是一个 next/react 项目。文件夹结构：

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>)}
    )
}

当我使用导航栏 link 访问主页时，帐户再次设置为未定义，我需要再次按下按钮才能进行设置。我怎样才能使字符串保持设置。喜欢坚持在导航栏上

Answer 1

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。

您还可以使用此逻辑创建自定义挂钩，这样组件看起来会更干净。或者更好的是，使用 use-state-persist

Answer 2

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

希望对您有所帮助

跨 React 组件的变量存储更新

Variable storage update across react component

javascript

reactjs

react-router

next.js

use-state