Por que meus dados salvos no localStorage desaparecem ao atualizar a página usando useEffect?

[Luciano Guedes de Oliveira]

Eu estava estudando e fazendo uns testes usando useEffect, e quando tentei salvar/recuperar dados no localStorage através do useEffect, os dados simplesmente somem do localStorage ao atualizar a página. 

segue o código do componente React: 

import { useState, useEffect } from "react";

function App() {
  const [input, setInput] = useState("");
  const [tarefas, setTarefas] = useState([]);

  useEffect(() => {
    const tarefaStorage = localStorage.getItem('@tarefas')
    if (tarefaStorage) {
      setTarefas(JSON.parse(tarefaStorage))
    }
  }, [])

  useEffect(() => {
    localStorage.setItem('@tarefa', JSON.stringify(tarefas))
  }, [tarefas])

  function handleTask(e) {
    e.preventDefault();
    setTarefas([...tarefas, input]);
    setInput("");
  }

  return (
    <div>
      <form onSubmit={handleTask}>
        <h1>Listar tarefas</h1>
        <label>Tarefa:</label>
        <br />
        <input
          placeholder="insira o nome da task"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <br />
        <button type="submit">ADD</button>
      </form>

      <div>
        <ul>
          {
            tarefas.map((tarefa) => {
              return (
                <li key={tarefa}>{tarefa}</li>
              )
            })    
          }
        </ul>
      </div>
    </div>
  )
}

export default App;

 

[Tiago Neves]

Fala, @Luciano Guedes de Oliveira!

 

O problema que você está enfrentando está relacionado ao uso do localStorage no React. Parece que há um pequeno erro de digitação no nome do item que você está salvando e recuperando do localStorage.

No useEffect onde você salva os dados, você está usando @tarefa como chave para o item no localStorage, enquanto no useEffect onde você os recupera, você está usando @tarefas. Esses nomes de chave devem ser os mesmos para garantir que você esteja salvando e recuperando os dados corretamente.

import { useState, useEffect } from "react";

function App() {
  const [input, setInput] = useState("");
  const [tarefas, setTarefas] = useState([]);

  useEffect(() => {
    const tarefaStorage = localStorage.getItem('@tarefas');
    if (tarefaStorage) {
      setTarefas(JSON.parse(tarefaStorage));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('@tarefas', JSON.stringify(tarefas)); // Corrigido para '@tarefas'
  }, [tarefas]);

  function handleTask(e) {
    e.preventDefault();
    setTarefas([...tarefas, input]);
    setInput("");
  }

  return (
    <div>
      <form onSubmit={handleTask}>
        <h1>Listar tarefas</h1>
        <label>Tarefa:</label>
        <br />
        <input
          placeholder="insira o nome da task"
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <br />
        <button type="submit">ADD</button>
      </form>
      <div>
        <ul>
          {tarefas.map((tarefa, index) => ( // Adicionado index como key
            <li key={index}>{tarefa}</li> // Usando index como key
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;