[英]How do i get Items from localstorage and render it to my list?
我正在尝试创建一个 Todo 列表,其中包含两个名为“Title”和“Detail”的值。 到目前为止,我能够在本地存储中设置项目,但不确定如何从同一本地存储中取回项目并将其呈现在列表中。
这是我的 TaskContext.js 组件:
import React, { createContext, useState, useEffect } from "react";
import uuid from "uuid/v1";
export const TaskContext = createContext();
const TaskContextProvider = props => {
const [tasks, setTasks] = useState([
{ title: "name of the wind", detail: "patrick", id: 1 },
{ title: "Rich dad poor dad", detail: "wilson", id: 2 }
]);
useEffect(() => {
localStorage.setItem("tasks", JSON.stringify(tasks));
}, [tasks]);
const addTask = (title, detail) => {
setTasks([...tasks, { title: title, detail: detail, id: uuid() }]);
};
const removeTask = id => {
setTasks(tasks.filter(task => task.id !== id));
};
return (
<TaskContext.Provider value={{ tasks, addTask, removeTask }}>
{props.children}
</TaskContext.Provider>
);
};
export default TaskContextProvider;
请帮帮我。
localStorage.getItem("tasks")
把它放在一个变量和JSON.parse()
。
您可以使用钩子内的localStorage.getItem("tasks")
从 localStorage 检索数据。
例子
const SomeComponent = props => {
const [tasks, setTasks] = useState();
useEffect(() => {
let taskList = JSON.parse(localStorage.getItem("tasks")); // get the data
if(taskList) {
setTasks(taskList); // update the state if taskList has data
}
}, []);
return (
/** Print your task here */
);
};
export default SomeComponent;
localStorage.setItem(key: JSON.stringify(value))
在这种情况下,您使用它来将项目保存到 localStorageJSON.parse(localStorage.getItem(key))
获取键存储的项目,在这种情况下,您需要将其从 JSON 转换为普通对象,因此需要 JSON.parse()localStorage.clear()
清除 localStorage 中的所有项目localStorage.removeItem(key)
通过 item 键从 localStorage 中删除一个项目const theTasks = JSON.parse(window.localStorage.getItem('tasks'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.