gpt4 book ai didi

reactjs - 为什么本地存储不适用于 useEffect?

转载 作者:行者123 更新时间:2023-12-01 22:56:25 26 4
gpt4 key购买 nike

我有以下代码并且运行良好。 <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

我的问题是以下修订不起作用 - 每次刷新页面时,本地存储都被清除。但它确实看起来应该有效 - 我正在学习在线教程,当讲师这样做时它正在工作。

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

function App() {
const LOCAL_STORAGE_KEY = 'contacts'

const [contacts, setContacts] = useState([]) // changed line

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

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

// added
useEffect(() => {
const savedContacts = JSON.parse(
localStorage.getItem(LOCAL_STORAGE_KEY)
)
if (savedContacts) {
setContacts(savedContacts)
}
}, [])


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

export default App

为了完整起见,这里是 <AppContact /> 的代码

import React, { Component } from 'react'

export class AddContact extends Component {
state = {
name: '',
email: '',
}

updateState = (e) => {
this.setState({ [e.target.name]: e.target.value })
}

addContact = (e) => {
e.preventDefault()
if (this.state.name === '' || this.state.email === '') {
return
}
this.props.newContact(this.state)
}

render() {
return (
<div className='ui main'>
<h2>Add Contact</h2>
<form className='ui form' onSubmit={this.addContact}>
<div className='field'>
<label>Name</label>
<input
type='text'
name='name'
value={this.state.name}
placeholder='Name'
onChange={this.updateState}
/>
</div>
<div className='field'>
<label>Email</label>
<input
type='text'
name='email'
value={this.state.email}
placeholder='Email'
onChange={this.updateState}
/>
</div>
<button className='ui button blue' type='submit'>
Add
</button>
</form>
</div>
)
}
}

export default AddContact

我想了解为什么第二种方法不起作用。

最佳答案

当第一个 useEffect 运行时(如预期),您在调用 addNewContact 时设置的值确实存储在 localStorage 中。问题是,当您重新加载页面时,相同的 useEffect 会覆盖 localStorage 中的内容,因为状态被重置为空数组 ([])。这会触发 useEffectcontacts 等于 [],并将其存储在 localStorage 中。


有几种方法可以处理它,但一种方法是在将其值存储到 localStorage 之前检查 contacts 是否为空数组。

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

这可以防止在页面首次加载时将 contacts 的初始状态存储在 localStorage 中。

关于reactjs - 为什么本地存储不适用于 useEffect?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73130905/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com