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

Salvar dados no localStorage após setar

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Caça aos bugs e atividade Conclusão

por Bruno Silva
| 50.9k xp | 4 posts

<script>
        const setLocalStorage = () => {
            const localStorageFilms = JSON.parse(localStorage.getItem('listedFilms'));
            return (localStorage.getItem('listedFilms') !== null ? localStorageFilms : []); 
        }

        const updateLocalStorage = () => {
            console.log(listedFilms);
            localStorage.setItem('listedFilms', JSON.stringify(listedFilms));    
        }

        const [listedFilms,setFilmList] = useState(loadedFilmList);

        const newSavedFilm = (film)=>{
            setFilmList([...listedFilms, film]);
            setTimeout(updateLocalStorage(),1000)
        }
</script>

Eai galera, tranquilo? Quero salvar os dados enviados através do form np localStorage e tô com o seguinte problema Ao enviar um form a função newSavedFilm é chamada, e listedFilms é atualizada, mas ao chamar o updateLocalStorage o listedFilms ainda não recebe o array atualizado, eu recebo o listedFilms sem o film incluido.

  • Tentei incluir um setTimeout, mas o delay não funciona
  • Por que isso ocorre e qual seria uma solução para esse problema?
2 respostas
solução!
por Vinicios Neves
| 1000k xp | 1102 posts
Instrutor Tech Lead | Tech Educator

Salve, Bruno!

Isso acontece porque o setState é assíncrono. Então, quando você chama a sua função updateLocalStorage o estado ainda não foi atualizado.

Existem algumas formas de se fazer isso, uma delas é fazer um pequeno ajuste no seu código para:

        const newSavedFilm = (film)=>{
            const movies = [...listedFilms, film],
            setFilmList(movies);
            updateLocalStorage(movies)
        }

e também:

        const updateLocalStorage = (movies) => {
            console.log(movies);
            localStorage.setItem('listedFilms', JSON.stringify(movies));    
        }

A nível de curiosidade, você também pode utilizar o hook useEffect para gerar um efeito sempre que o seu estado listedFilms mudar, dessa forma:

useEffect(() => {
    // esse efeito será executado sempre que o listedFilms for alterado
    localStorage.setItem('listedFilms', JSON.stringify(listedFilms));
}, [listedFilms])

Espero que tenha te ajudado! E muito bacana a ideia guardar no localStorage :)

por Bruno Silva
| 50.9k xp | 4 posts

Valeu Vinicios, ajudou demais com as duas ideias