Estou usando esse código e não sei pq não está salvando. Usando console.log percebi que quando uso o getItem ele busca algo e aparentemente salva, so que como o codigo roda 4 vezes na primeira vez salva e nas outras 3 ta apagado. O useEffect que tem o getItem roda 2 vezes na primeira vez aparece algo e na segunda vez fica zerado. Alguem sabe oq ta causando esse comportamento?
import { useState, useEffect } from 'react'
import { v4 as uuidv4 } from 'uuid'
const Form = () => {
const [task, setTask] = useState('')
const [listTasksObject, setListTasksObject] = useState([])
function register (event) {
event.preventDefault()
setListTasksObject([
...listTasksObject,
{
task: task,
done: false,
id: uuidv4(),
}])
setTask('')
}
useEffect(() => {
if (localStorage.getItem('@tasks') !== null) {
setListTasksObject(JSON.parse(localStorage.getItem('@tasks')))
}
}, [])
useEffect(() => {
localStorage.setItem('@tasks', JSON.stringify(listTasksObject))
}, [listTasksObject])
return (
<section className="w-5/6">
<form onSubmit={register} className="flex flex-col gap-2 items-center">
<input
value={task}
onChange={event => setTask(event.target.value)}
placeholder="Digite sua terefa"
className="rounded-lg w-full flex placeholder:text-center text-center text-backGround_1"
/>
<button className="bg-primary w-2/5 rounded-full font-bold">Cadastrar</button>
</form>
</section>
)
}
export default Form