LocalStorage 不保存刷新答案

【问题标题】：LocalStorage doesn't save on refreshLocalStorage 不保存刷新
【发布时间】：2022-01-01 04:07:05
【问题描述】：

当我提交时它在 localStorage 中显示数据，但刷新时它会清除 LocalStorage。

我错过了什么？

上下文：这是一个简单的待办事项应用程序，App 组件是唯一具有 localStorage 或 useEffect 的组件。

它来自 Youtube 上 Dev Ed 的教程“使用 REACT 构建 Todo 应用程序”

import "./App.css";
import { useState,useEffect } from "react";
import Form from "./components/Form/Form";
import TodoList from "./components/TodoList/TodoList";

function App() {


  const [inputText, setInputText] =  useState("")
  const [todos, setTodos] = useState([])
  const [status, setStatus] = useState("all")
  const [filteredTodos, setFilteredTodos] = useState([])

  useEffect(() => {
    filterHandler()
    saveLocalTodos()
  },[todos, status])

  useEffect(() => {
    getLocalTodos()
  },[])


  const filterHandler = () => {
    switch(status){
      case "completed":
        setFilteredTodos(todos.filter(todo => todo.completed === true))
        break;
      case "uncompleted":
        setFilteredTodos(todos.filter(todo => todo.completed ===false))
        break;
      default:
        setFilteredTodos(todos)
        break;
    }
  }

  const saveLocalTodos = () => {
      localStorage.setItem("todos", JSON.stringify(todos))
  }

  const getLocalTodos = () => {
    if(localStorage.getItem("todos") === null){
      localStorage.setItem("todos", JSON.stringify([]));
    }else {
      let todoLocal = JSON.parse(localStorage.getItem("todos"));
      setTodos(todoLocal)
    }
  }


  return <div className="App">
    
    <header>
      <h1>Todo - List</h1>
      <Form 
      todos={todos} 
      setTodos={setTodos} 
      inputText={inputText} 
      setInputText={setInputText}
      setStatus={setStatus}
     
      />
      <TodoList  filteredTodos={filteredTodos}  setTodos={setTodos} todos={todos}/>
    </header>
    
    
    </div>;
}

export default App;

【问题讨论】：

useEffect documentation 说 通过使用这个 Hook，你告诉 React 你的组件需要在渲染后做一些事情。 所以即使 [todos, status] 没有改变它也会被调用（ l. on mount），它调用saveLocalTodos，在mount时保存[]。

标签： reactjs local-storage

【解决方案1】：

在保存到localStorage之前需要检查todos是否为空

useEffect(() => {
    filterHandler()
if(todos.length !== 0)
    saveLocalTodos()
  },[todos, status])

【讨论】：

你的代码对我不起作用，但我在下面用你的想法改变了它，它起作用了，谢谢！ const saveLocalTodos = () => { if(todos.length !== 0){ localStorage.setItem("todos", JSON.stringify(todos)) } }

【解决方案2】：

这对我有用（感谢 Lah Ezcen 和 Jax-p）：

    const saveLocalTodos = () => {
    if(todos.length !== 0){        //this line is new
      localStorage.setItem("todos", JSON.stringify(todos))
    }   
    }

它现在检查数组是否为空，如果不是则保存到 localStorage。

【讨论】：