React js запись в local storage_2
После добавления любых двух задач(они сохраняются в local storage) При нажатия на иконку карандаш(появляется форма с кнопкой редактировать)и внесения изменения в задачу, происходит редактирование,а в хранилище данныестарые. Я так пониманию, надо записать снова в local storage. Помогите, как не пытался, пока не смог. Думаю в updateTodo ерорка. Путь в репозитории: react-todo-app3/src/components/TodoList.js Сайт: https://react-todo-app3.vercel.app Репозиторий на гит: https://github.com/paul76546/react-todo-app3
import React, { useState } from 'react';
import TodoForm from './TodoForm';
import Todo from './Todo';
function TodoList() {
//const [todos, setTodos] = useState([]);переделываем на
const [todos, setTodos] = useState(localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')) : []);
//добавляем еще одну функцию
const setTodosWithSave = (newTodos) => {
setTodos(newTodos);
localStorage.setItem('todos', JSON.stringify(newTodos))
};
const addTodo = todo => {
if (!todo.text || /^\s*$/.test(todo.text)) {
return;
}
const newTodos = [todo, ...todos];
setTodosWithSave(newTodos);
console.log(...todos);
};
//перед консоль лог было setTodos(newTodos);
const updateTodo = (todoId, newValue) => {
if (!newValue.text || /^\s*$/.test(newValue.text)) {
return;
}
setTodos(prev => prev.map(item => (item.id === todoId ? newValue : item)));
};
//34 строка?
const removeTodo = id => {
const removedArr = [...todos].filter(todo => todo.id !== id);
setTodosWithSave(removedArr);
};
const completeTodo = id => {
let updatedTodos = todos.map(todo => {
if (todo.id === id) {
todo.isComplete = !todo.isComplete;
}
return todo;
});
setTodosWithSave(updatedTodos);
};
//let toLocal = reactLocalStorage.setObject('var', {'test': 'test'});?????How
//h1 заголовок Какие планы на сегодня?
// (What's the Plan for Today?) по английскому
// меняю на Список дел на сегодня
//ставлю обратно
return (
<>
<h1>Список дел на сегодня</h1>
<TodoForm onSubmit={addTodo} />
<Todo
todos={todos}
completeTodo={completeTodo}
removeTodo={removeTodo}
updateTodo={updateTodo}
/>
</>
);
}
export default TodoList;```
Ответы (1 шт):
Автор решения: Илья Паймушкин
→ Ссылка
Перепишите функцию updateTodo следующим образом:
const updateTodo = (todoId, newValue) => {
if (!newValue.text || /^\s*$/.test(newValue.text)) {
return;
}
setTodosWithSave(todos.map(item => (item.id === todoId ? newValue : item)));
}