0

Hola he hecho un To Do List que almacena las tareas en el localStorage del navegador, para que cuando recargues la página éstas sigan apareciendo y no se borren, funciona de manera extraña y no hace lo que debe. De alguna forma no consigo guardar el estado de la tarea, porque puedes crear una tarea, pinchar en ella, y tacharla, al hacer esto la tarea tendrá nuevos estilos fácilmente visibles.

Cuando hago click en una tarea y la tacho, y recargo la página, ésta no aparece tachada, es decir, no ha almacenado su estado.

El código del componente a la hora de agregar las tareas, y donde hago uso de LocalStorage es el siguiente:

 function TodoList() {
    
    const [tareas, setTareas] = useState([]);
    useEffect(() =>{
        if (localStorage.getItem("localTasks")){
            const storedList = JSON.parse(localStorage.getItem("localTasks"))
            setTareas(storedList);
        }
    },[])
    const agregarTarea = tarea => {
        console.log(tarea)
        if(tarea.text.trim()){ /* Verifica que la cadena no está vacía */
            tarea.text = tarea.text.trim(); /* Quita los espacios innecesarios */
            const tareasActualizadas = [tarea, ...tareas]; /* Generamos un array con todas las
            tareas anteriores, pero en primer lugar, la nueva tarea */
            setTareas(tareasActualizadas); /* Actualizamos el estado */
            localStorage.setItem("localTasks", JSON.stringify(tareasActualizadas))
        
        }
    }
    const EliminarTarea = id => {
        const tareasActualizadas = tareas.filter(tarea => tarea.id !== id);
        setTareas(tareasActualizadas);
        localStorage.setItem("localTasks", JSON.stringify(tareasActualizadas))
    }
    const CompletarTarea = id => {
        const tareasActualizadas = tareas.map(tarea => {
            if(tarea.id === id){
                tarea.complete = !tarea.complete;
            }
            return tarea;
        });
        setTareas(tareasActualizadas);
    }
    return (

        <> 
            <TaskForm 
                onSubmit={agregarTarea}
            />
            <div className="task-todolist-wrapper">
                {
                    tareas.map((tarea) => 
                        <Task 
                            key={tarea.id}
                            id={tarea.id}
                            text={tarea.text}
                            complete={tarea.complete}
                            completeTask={CompletarTarea}
                            removeTask={EliminarTarea}
                        />
                    )
                }
            </div>

        </>
    )
}
export default TodoList

He probado a poner localStorage.setItem("localTasks", JSON.stringify(tareasActualizadas)) al final del método CompletarTarea que lo que hace es cambiar el estado de una clase de true a false en función del click pero no da resultado.

Podéis ver el funcionamiento de la App en este enlace https://todolistjuanjesc.netlify.app/

Un saludo y gracias de antemano.

2 respuestas 2

1

Prueba a poner la linea de setear la localstorage en un useEffect que se ejecute cada vez que modificas algo en la variable tareas

useEffect(()=>{
     localStorage.setItem("localTasks", JSON.stringify(tareas))
},[tareas])

Es que el problema está en el el seteo de la variable tareas es asincrono y cuando quieres guardar las tareas en el localstorage despues de modificarla aun tiene el valor anterior. Si haces así, tendrías que eliminar las lineas donde modificas el local storage en las funciones de crear, eliminar, completar.

2
  • No termina de funcionar, de esta forma lo que ocurre es que ni siquiera guarda las tareas. Curioso. el 22 jun. 2022 a las 11:32
  • He podido solucionarlo de la forma en la que lo estaba intentando, pero no debería funcionar, esta es la típica situación en la que funcionan cosas y no sabes por qué, y te lían más jaja, lo que he hecho ha sido añadir la línea ``` localStorage.setItem("localTasks", JSON.stringify(tareas)) ``` en el método de CompletarTarea, PERO justo antes de actualizar el estado, osea justo antes de setTareas(tareasActualizadas), lo cual no le veo sentido, debería ser después, pero en fin.. Solucionado parece ser. el 22 jun. 2022 a las 11:48
0

tengo creo que el mismo problema que no me guarda las tareas en local storage, de tanto revisar y testear el código descubrí el problema, el problema esta en el archivo index.js que me renderiza el sitio utilizando el siguiente codigo:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

si lo remplazo el ReactDOM.createRoot.render(...) por ReactDOM.render(...) si funciona y guarda en local storage, pero no tengo idea de porque pasa esto.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.