单击反应中的元素时如何更改 LocalStorage 中存储的数据？

Question

我正在反应中创建待办事项应用程序，并将数据存储在本地存储中，当用户单击特定任务时，它被标记为已完成，为此目的，我在本地存储中的所有任务都有“完整”布尔属性。现在我想更改它该特定任务的 onclick 属性，如何实现这一点？。这里是代码链接： https://github.com/Khatri-Jinal/react-app/tree/实用4

Answer 1

从本地存储获取值并更新它，然后再次设置它
例如：
let data=localStorage.getItem('tasks')
//对数据进行更改
localStorage.setItem("tasks", JSON.stringify(tasks));

Answer 2

我建议您为本地存储创建一个自定义挂钩（即 useLocalStorage）。这可确保当您更新本地存储中的值时，使用更新值的组件会自动重新渲染。

您可以在线查找或使用此 YouTube 视频作为参考。第一个例子是 useLocalStorage。

编辑：
您的任务变量应该是一个对象数组。渲染任务时，在 onclick 函数上传递一个 id 或该任务特有的任何内容（在本例中，我将只使用任务名称，但我建议创建您自己的任务名称）。

// 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>
});

这是你的 onClickTask 函数

const onClickTask = (identifier) => {
  const index = tasks.findIndex(task => task.desc === identifier);
  const newTasks = [...tasks];
  newTasks[index].isComplete = true;

  setTasks(newTasks);
};

Answer 3

我提出了这个解决方案，希望它有所帮助。

  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>
  );