Estoy creando una aplicación de tareas pendientes en reaccionar y almacenando los datos en el almacenamiento local, cuando el usuario hace clic en una tarea en particular, se marca como completada, para ese propósito tengo la propiedad booleana "completa" para todas las tareas en el almacenamiento local. Ahora quiero cambiar eso haga clic en la propiedad de esa tarea en particular, ¿Cómo lograr esto? Aquí está el enlace del código: https://github.com/Khatri-Jinal/react-app/tree/practical4
obtenga el valor del almacenamiento local y actualícelo y luego configúrelo nuevamente, por ejemplo: let data=localStorage.getItem('tasks') //haga cambios en los datos localStorage.setItem("tasks", JSON.stringify(tasks));
Le sugiero que haga un enlace personalizado para el almacenamiento local (es decir, useLocalStorage). Esto garantiza que cuando actualice un valor en el almacenamiento local, los componentes que utilizan el valor actualizado se vuelvan a representar automáticamente.
Puede buscarlo en línea o usar este vídeo de YouTube como referencia. El primer ejemplo es useLocalStorage.
EDITAR: la variable de su tarea debe ser una matriz de objetos. Al representar la tarea, pase una identificación o cualquier cosa única para la tarea en la función onclick (en este ejemplo, solo usaré el nombre de la tarea, pero le aconsejo que cree el suyo propio).
// tasks hook const [tasks, setTasks] = useState([ {desc: 'jog', isComplete: true}, {desc: 'walk', isComplete: false}, {desc: 'read', isComplete: true}, ]); // rendering tasks tasks.map(task => { <div key={task.desc} onClick={() => onClickTask(task.desc)} task.desc </div> });Y esta es su función onClickTask
const onClickTask = (identifier) => { const index = tasks.findIndex(task => task.desc === identifier); const newTasks = [...tasks]; newTasks[index].isComplete = true; setTasks(newTasks); };Hice esta solución, espero que ayude.
const [todoList, setTodoList] = useState([]); // Get todo list from localStorage when the component is mounted useEffect(() => { setTodoList(JSON.parse(localStorage.getItem('todoList'))); }, []) function updateTodo(todoId, data) { const todoIndex = todoList.findIndex(todo => todo.id === todoId); // Get a copy of the todo let updatableTodo = { ...todoList[todoIndex] }; // Update the todo here... updatableTodo.title = data.title; // Update the state and localStorage setTodoList(todoList => { const newTodoList = [...todoList]; newTodoList[todoIndex] = updatableTodo; localStorage.setItem('todoList', JSON.stringify(newTodoList)); return newTodoList; }) } return ( <div> {todoList.map((todo) => <button onClick={() => updateTodo(todo.id, data)} key={todo.id}>Update</button> )} </div> );