请问 react,nextjs,useContext 刷新页面后数据丢失问题如何处理呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1113 天前的主题，其中的信息可能已经有所发展或是发生改变。

_app.js 里面的代码如下

function MyApp({Component, pageProps}) {
    const [user, setUser] = useLocalStorage()
    const value = useMemo(() => ({user, setUser}), [user, setUser]);
    return <SSRProvider>
        <UserContext.Provider value={value}>
            <Layout>
                <Component {...pageProps} />
                <ToastContainer position={'top-center'} theme={'dark'}/>
            </Layout>
        </UserContext.Provider>
    </SSRProvider>
}

useLocalStorage 代码如下

// Hook
import {useState} from "react";

export const useLocalStorage = (key, initialValue) => {
    // State to store our value
    // Pass initial state function to useState so logic is only executed once
    const [storedValue, setStoredValue] = useState(() => {
        try {
            // Get from local storage by key
            const item = window.localStorage.getItem(key);
            // Parse stored json or if none return initialValue
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            // If error also return initialValue
            // console.log(error);
            return initialValue;
        }
    });
    // Return a wrapped version of useState's setter function that ...
    // ... persists the new value to localStorage.
    const setValue = (value) => {
        try {
            // Allow value to be a function so we have same API as useState
            const valueToStore = value instanceof Function ? value(storedValue) : value;
            // Save state
            setStoredValue(valueToStore);
            // Save to local storage
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            // A more advanced implementation would handle the error case
            // console.log(error);
        }
    };
    return [storedValue, setValue];
}
export const getCookie = (name,cookie) => {
    const value = `; ${cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

Layout.js 代码如下

import Meta from "./Meta";
import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap";
import {useContext} from "react";
import {UserContext} from "../utils/userContenxt";
import jsCookie from "js-cookie";
import Router from "next/router";

export const Layout = ({children}) => {
    const {user} = useContext(UserContext)
    if (user === undefined) return (<>
        <Meta/>
        <Container>{children}</Container>
    </>)
    const {menu} = user

    function handleLogout() {
        localStorage.removeItem('u')
        jsCookie.set('token', '')
        Router.push('/login')
    }

    return (<>
        <Meta/>
        <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
            <Container>
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav"/>
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="me-auto">
                        {menu.map(item => (<NavDropdown key={item.id} title={item.name} id="collasible-nav-dropdown">
                            {item.Children.map(item => (item.divide === 1 ? <NavDropdown.Divider/> : <NavDropdown.Item onClick={() => Router.push(item.path)}>{item.name}</NavDropdown.Item>))}
                        </NavDropdown>))}
                    </Nav>
                    <Nav>
                        <Nav.Link eventKey={2} href="#memes">
                            {user.u.uname}
                        </Nav.Link>
                        <Nav.Link onClick={() => handleLogout()}>退出</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
        {children}
    </>)
}

8 条回复 • 2021-12-06 14:25:01 +08:00

sciel

2021-12-05 14:00:53 +08:00

Layout.js 里面获取 user 数据时，刷新 user 就会出现 undefine ，代码如下，请问这个问题如何处理呢？
```
import Meta from "./Meta";
import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap";
import {useContext} from "react";
import {UserContext} from "../utils/userContenxt";
import jsCookie from "js-cookie";
import Router from "next/router";

export const Layout = ({children}) => {
const {user} = useContext(UserContext)
if (user === undefined) return (<>
<Meta/>
<Container>{children}</Container>
</>)
const {menu} = user

function handleLogout() {
localStorage.removeItem('u')
jsCookie.set('token', '')
Router.push('/login')
}

return (<>
<Meta/>
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
{menu.map(item => (<NavDropdown key={item.id} title={item.name} id="collasible-nav-dropdown">
{item.Children.map(item => (item.divide === 1 ? <NavDropdown.Divider/> : <NavDropdown.Item onClick={() => Router.push(item.path)}>{item.name}</NavDropdown.Item>))}
</NavDropdown>))}
</Nav>
<Nav>
<Nav.Link eventKey={2} href="#memes">
{user.u.uname}
</Nav.Link>
<Nav.Link onClick={() => handleLogout()}>退出</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
{children}
</>)
}
```