无法将项目添加到本地存储

Question

添加到localstorage时，一切正常，但是删除时，元素状态没有被替换（添加按钮没有改变）

        {window.localStorage.getItem('pokemon').includes(value.name)  ?
        <p 
        className="compareTrue"
        data-name={value.name}
        onClick={(e: MouseEvent<HTMLParagraphElement>) => DPokemon(e.target.dataset.name)}
        >{value.name} added to comparison! </p>
        :
        <p className="compareFalse"
        data-name={value.name}
        onClick={(e: MouseEvent<HTMLParagraphElement>) => setPokemon(e.target.dataset.name)}
        >
         Compare {value.name} from another!
        </p>
        }




    // localStorage set

const setLocalStorage:
(key: string, initial: string) => 
(string | Dispatch<SetStateAction<string>>)[]
=(key:string , initial:string) => {
    
    let old_data:any
    let old_dataParse:any
    const [value, setValue]:any = useState(() => {
        return  initial
    })
    useEffect(() => {}, [value])
    console.log(value, 'set')
    if (typeof window !== 'undefined') {
        old_data = localStorage.getItem(key)
        old_dataParse = JSON.parse(old_data)
        old_dataParse?.push(value)
        old_dataParse = [...new Set(old_dataParse)]
        if(old_dataParse.length < 4){
            window.localStorage.setItem(key, 
            JSON.stringify(
                old_dataParse.filter(
                    (data:string) => data !== '')))
        }
    }
    return [value , setValue]
}
// localStorage delete
const deleteLocalStorage:
(key: string, initial: string) => 
(string | Dispatch<SetStateAction<string>>)[]
=(key:string , initial:string) => {
    let old_data:any
    let old_dataParse:any
    const [value, setValue]:any = useState(() => {
        return  initial
    })
    useEffect(() => {}, [value])
    console.log(value, 'del')
    if (typeof window !== 'undefined') {
        old_data = localStorage.getItem(key)
        old_dataParse = JSON.parse(old_data)
        let pokemonFilter = old_dataParse.filter((str:string) =>  str !== value)
        window.localStorage.setItem('pokemon', JSON.stringify(pokemonFilter))
    }
    return [value , setValue]
}



const [pokemonSet, setPokemon] = setLocalStorage('pokemon', '')
const [pokemonD, DPokemon] = deleteLocalStorage('pokemon', '')

useEffect(() => {
    loadData()
}, [pokemonSet,pokemonD])

第一次点击添加到 localstorage，第二次点击删除，第三次添加没有变化，如何修复它

我猜是因为 useEffect，它不会更新对象的状态

?

状态未更新

Answer 1

您需要在删除和添加函数之外定义 useState。当它在它们内部声明时，它只在该函数内部起作用。如果您在它们之外声明它，那么两个函数将能够使用相同的状态。

不确定你为什么需要这些功能。如果我这样做，我会使用：

const [state, setState] = React.useState(localStorage.getItem('item') || initial);

为您的页面使用当时的状态。使用 setState 从中删除或添加。当您想将其保存到本地存储时，只需这样做。 localStorage.setItem('item', 状态);

无法将项目添加到本地存储

can't add item to localstorage

state

typescript

reactjs