我一直在使用Nextjs并try 判断我的用户是否通过本地存储登录,但在我当前的设置中,当setAuth为True并且页面被刷新时,状态设置为默认空值,我希望它保持以前设置的True.请帮助.

export default function App({Component, pageProps}) {
    const [isAuth, setAuth] = useState('')


    useEffect(() => {
        const storage = localStorage.getItem('isAuth')
        setAuth(storage)
    },[])


    useEffect(() => {

        localStorage.setItem("isAuth", isAuth)
    }, [isAuth])


    return (
        <AppContext.Provider
            value={{
                isAuth,
                setAuth
            }}>
            <Layout>
                <Component {...pageProps} />)
            </Layout>
        </AppContext.Provider>
    )
}

推荐答案

在设置isAuth状态值之前,您需要首先查看本地存储值.因为您使用的是NextJS,所以在应用任何客户端逻辑之前,您可以判断组件是否在客户端呈现:typeof window !== "undefined"

如果页面是未定义的,那么它是在服务器端呈现的,因此您不希望使用本地存储API,并且您的authStorage变量将被设置为False.

因此,您的初始状态将如下所示:

const authStorage = typeof window !== "undefined" && localStorage.getItem('auth')
const [isAuth, setIsAuth] = useState(authStorage ?? null)

这将使您不必两次呈现组件.authStorage ?? null表示如果该值不存在,则设置值null. 然后,您可以继续使用您的组件,而无需使用useEffect函数.

您的代码片段缺少当用户未通过身份验证时会发生的情况,但您可以重定向到登录页面或使用函数中的setIsAuth()来设置下一页面呈现的状态值和本地存储值.

Reactjs相关问答推荐

从另一个组件更改组件中const的状态

REACT路由DOM根据参数呈现不同的路由

将动态元素中的输入数据传输到Reaction

Reaction Ploly:如何在多个子情节中共享zoom 状态

在React Create App TS项目中安装material UI

使用REACT-RUTER-DOM链接仅更新一个搜索参数

Reaction Google Maps API无法获取标题

无法使用Reaction日期选取器和Next.js设置初始日期

我如何在不被 destruct 的情况下将导航栏固定在顶部?

蚂蚁 Select .列表弹出窗口不会';有时不会出现

在任何渲染之前在ReactJs中获取数据

如何修复ReferenceError:在构建过程中未定义导航器

React-chartjs-2:红色和绿色之间的差距

如何隐藏移动导航栏后面的向下滚动图标和文本?

标签文本删除了 MUI 概述的输入

为 Next.js 应用程序目录中的所有页面添加逻辑的全局文件是什么?

onChange in useEffect 的最佳实践

为什么我的 Next.js (React) 组件只有在页面中时才有效?

React Native Realm 应用程序在发布构建后崩溃

如何通过 id 从 useSprings 数组中删除元素