小编Ste*_*eve的帖子

为什么本地存储不能与 useEffect 一起使用?

我有以下代码并且运行良好。<AddContact />是一个简单的组件,它提供一个输入表单,该表单收集用户的姓名+电子邮件 - 为了完整起见,我在末尾附加了其代码。收集的contacts数组存储在 localStorage 中,当我刷新页面时,它们只是重新加载。都好

import './App.css'
import { useState, useEffect } from 'react'

function App() {
    const LOCAL_STORAGE_KEY = 'contacts'

    const [contacts, setContacts] = useState(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || [])

    const addNewContact = (newContact) => {
        setContacts([...contacts, newContact])
    }

    useEffect(() => {
        console.table(contacts)
        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts))
    }, [contacts])

    return (
        <AddContact newContact={addNewContact} />
    )
}

export default App
Run Code Online (Sandbox Code Playgroud)

我的问题是以下修订不起作用 - 每次刷新页面时,本地存储都会被清除。但它看起来确实应该有效 - 我正在遵循在线教程,并且当讲师执行此操作时它正在工作。

import './App.css'
import { useState, useEffect } from 'react'

function App() {
    const LOCAL_STORAGE_KEY = …
Run Code Online (Sandbox Code Playgroud)

local-storage reactjs next.js react-hooks

2
推荐指数
1
解决办法
3604
查看次数

标签 统计

local-storage ×1

next.js ×1

react-hooks ×1

reactjs ×1