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

Question

我正在 React 中创建待办事项应用程序，并将数据存储在本地存储中，当用户单击特定任务时它被标记为已完成，为此我为所有任务设置了“完成”布尔值属性在 localStorage.now 中，我想更改那个属性那个特定任务的点击，如何实现这个？这是代码 link ： https://github.com/Khatri-Jinal/react-app/tree/practical4

Answer 1

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

Answer 2

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

你可以上网查一下，也可以用this youtube viode作为参考。第一个例子是 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>
  );

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

How to change the data stored in LocalStorage when clicking on element in react?

javascript

reactjs

event-handling

local-storage