जब मैं सबमिट करता हूं तो यह स्थानीय स्टोरेज में डेटा प्रदर्शित कर रहा है, लेकिन रीफ्रेश पर यह स्थानीय स्टोरेज को साफ़ करता है।

मुझे किसकी याद आ रही है?

प्रसंग: यह एक सरल टूडू ऐप है और ऐप कंपोनेंट केवल एक ही है जिसमें लोकलस्टोरेज या यूज़इफेक्ट है।

यह यूट्यूब पर देव एड के ट्यूटोरियल 'बिल्ड ए टूडू ऐप विद रिएक्ट' से है।

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;

1
AlexJanow 22 नवम्बर 2021, 17:54

2 जवाब

सबसे बढ़िया उत्तर

लोकलस्टोरेज में सेव करने से पहले आपको यह जांचना होगा कि क्या टोडोस खाली नहीं है

useEffect(() => {
    filterHandler()
if(!!todos)
    saveLocalTodos()
  },[todos, status])
0
Lah Ezcen 22 नवम्बर 2021, 18:01
यह मेरे लिए आपके कोड के साथ काम नहीं करता था, लेकिन मैंने इसे आपके विचार से नीचे बदल दिया और यह काम कर गया, धन्यवाद! const saveLocalTodos = () => { if(todos.length !== 0){ localStorage.setItem("todos", JSON.stringify(todos))}}
 – 
AlexJanow
22 नवम्बर 2021, 18:13

यह मेरे लिए काम करता है (लाह एज़ेन और जैक्स-पी के लिए धन्यवाद):

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

अब यह जांचता है कि सरणी खाली है या नहीं और यदि नहीं तो यह स्थानीय स्टोरेज में सहेजता है।

0
AlexJanow 22 नवम्बर 2021, 18:18