reactjs - 存储在本地存储中的渲染/更新列表

问题描述

我正在尝试基于名为 todos 的对象呈现列表。我希望在用户离开页面后保持这种状态。当用户添加一个待办事项对象时，它会保存在本地并使用状态更新待办事项对象。待办事项未正确呈现在列表中，所以我想知道我做错了什么。

待办事项对象：

const [todos, setTodos] = useState([
  {
    text: "Learn about React",
    isCompleted: false,
    id: uuid()
  },
]);

添加功能（在此处更新 todos 应该重新呈现我的列表）：

const addTodo = text => {
  setTodos([{text, isCompleted: false, id: uuid()}, ...todos]);   //updates todos object
  localStorage.setItem("currList", JSON.stringify(todos));        //saves new todos object
  storedCurrList = localStorage.getItem("currList");              //retrieves new object
  parsedList = JSON.parse(storedCurrList);                        //parses object
  setTodos(parsedList);                                           //updates based on local save
};                                                                //object so that the update persists

呈现待办事项的组件：

{todos.map((value, index) => {
   return(
     <ListItem key={todos.id}> 
       <ListItemIcon>
         <Checkbox
           edge="start"
           checked={value.isCompleted}
           onChange={() => removeTodo(index)}
           tabIndex={-1}
           disableRipple
          />
       </ListItemIcon>
       <ListItemText disableTypography style={{fontFamily: 'Work Sans', fontSize: 35, color: nightMode.listText}} primary={value.text}/>
     </ListItem>
   );
 })}

标签： reactjs

如果您不想渲染todosfromlocalStorage您必须先阅读它，然后将其设置为您的初始todos状态。

const [todos, setTodos] = React.useState([]); // todos are empty by default

React.useEffect(() => {
  // reads the todos saved from localStorage and set that as the new value
  // of our todos state — if currList not found, will fallback to empty list
  const savedTodos = JSON.parse(localStorage.getItem("currList")) || [];
  setTodos(savedTodos);
}, []);

现在更新todoson时localStorage，将您的addTodo处理程序更改为

const addTodo = text => {
  // we'll use this to update our `todos` state and `localStorage` 
  const newTodos = [
    { text: input, isCompleted: false, id: uuid() },
    ...todos
  ];

  setTodos(newTodos);
  localStorage.setItem("currList", JSON.stringify(newTodos));
};

当您在您的addTodo函数上执行此操作（下面的代码）时，即使您先调用，todos您设置的localStorage也是未更新的。todossetTodos

setTodos([{text, isCompleted: false, id: uuid()}, ...todos]);
localStorage.setItem("currList", JSON.stringify(todos)); // todos here don't have the new todo

我创建了一个代码框供您结帐，希望您能理解。

reactjs - 存储在本地存储中的渲染/更新列表

问题描述

解决方案

推荐阅读