Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Uso do localStorage no React

por Carlos Yago Silva Sousa
| 59.5k xp | 23 posts

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
4 respostas
por Renan Lima
| 3055.7k xp | 6395 posts
Instrutor Apoio Educacional - Alura

Olá Carlos, tudo bem?

O código que você compartilhou parece estar correto, mas talvez o problema esteja no fato de que você está usando o useEffect duas vezes.

O primeiro useEffect é responsável por buscar as tarefas salvas no localStorage e atualizar o estado da lista de tarefas. Já o segundo useEffect é responsável por salvar as tarefas no localStorage toda vez que houver uma mudança na lista de tarefas.

Pelo que você descreveu, parece que o primeiro useEffect está sendo executado duas vezes e, por isso, a lista de tarefas está sendo sobrescrita com um array vazio. Para resolver esse problema, você pode tentar remover o segundo useEffect e colocar a linha de código que salva as tarefas no localStorage dentro da função register, logo após a linha que adiciona a nova tarefa na lista.

Dessa forma, a lista de tarefas será atualizada e salva no localStorage toda vez que uma nova tarefa for adicionada. Espero ter ajudado e bons estudos!

por Carlos Yago Silva Sousa
| 59.5k xp | 23 posts

O problema de adicionar dentro da função register é que na primeira vez que carrega a pagina o primeiro item não é adicionado na primeira vez, somente o primeiro item a partir do segundo item ficar normal, o problema é apenas o primeiro sempre que ocorre o carregamento da pagina.

solução!
por Carlos Yago Silva Sousa
| 59.5k xp | 23 posts

Consegui resolver. Usando o chatGPT percebi que la era feito o array em uma constante, ai repeti isso deixando a função register dessa maneira. 

function register(event) {
        event.preventDefault()

        const obj = [
            ...listTasksObject,
            {
                task: task,
                done: false,
                id: uuidv4(),
            }]

        setListTasksObject(obj)
        localStorage.setItem('@tasks', JSON.stringify(obj))

        setTask('')
    }
por Renan Lima
| 3055.7k xp | 6395 posts
Instrutor Apoio Educacional - Alura

Opa!! Ai sim. Que bom que conseguiu resolver. o Chat GPT sabendo utilizar ele, e entendendo o contexto, ele ajuda muito. Valeu o feedback.