时间戳

首页 > 解决方案 > 刷新时所有待办事项都不会出现在前端，而所有输入的待办事项都存储在本地存储中

javascript - 刷新时所有待办事项都不会出现在前端，而所有输入的待办事项都存储在本地存储中

问题描述

只有单个待办事项出现在前端，只有键，没有任何价值。我也在使用useEffect Hook但问题没有解决。请在这里帮助我，我在这段代码中遗漏了一些东西。

import './App.css';
import Header from "./my-components/header.js";
import Todos from "./my-components/todos";
import Footer from "./my-components/footer";
import { Addtodo } from "./my-components/addtodo";
import React, { useState, useEffect } from 'react';
   
 function App() {
 let inittodos;
 if (localStorage.getItem("todoslist") === null) {
    inittodos = [];
}
 else {
    inittodos = JSON.parse(localStorage.getItem("todoslist"));
}
 const addtodo = (task, task_name, members) => { 
  let newtodo = {
  task: task,
  task_name: task_name,
  members: members
};

settodos([...todoslist, newtodo]);

 }
const [todoslist, settodos] = useState([inittodos]);
useEffect(() => {

localStorage.setItem("todoslist", JSON.stringify(todoslist));

 }, [todoslist]);

 return (
  <>
  <Header title="Learnig-React" search_bar={true} />
  <Addtodo addtodo={addtodo} />
  <Todos todos={todoslist} ondelete={ondelete} />
  <Footer />
  </>
 );

 }
 export default App;

Add_todo 组件 只有单个待办事项出现在前端，只有键，没有任何值。我也在使用 useEffect Hook 但问题没有解决。请在这里帮助我，我在这段代码中遗漏了一些东西。


   This is Add_todo component code
   
       import React, { useState } from 'react'
       
       export const Add_todo = ({ addtodo }) => {
           const [task, settask] = useState("");
           const [task_name, settask_name] = useState("");
           const [members, setmembers] = useState("");
   
   
   //submit function for storing contents onclick on submit button
       const submit = (e) => {
           e.preventDefault();
           if (!task || !task_name || !members) {
               alert("Plese fill all details");
           }
           else {
               addtodo(task, task_name, members);
               settask("");
               settask_name("");
               setmembers("")
           }
       }
       return (
           <div className="container">
               <form onSubmit={submit}>
                   <div className="form-group">
                       <label htmlFor="task">Task</label>
                       <input type="text" id="task" className="form-control" aria-describedby="emailHelp" value={task} onChange={(e) => { settask(e.target.value) }} placeholder="Enter Task" />
                       <small id="" className="form-text text-muted">We'll never share your email with anyone else.</small>
                   </div>
   
                   <div className="form-group">
                       <label htmlFor="task_name">Task-Name</label>
                       <input type="textl" id="task_name" className="form-control" aria-describedby="emailHelp" value={task_name} onChange={(e) => { settask_name(e.target.value) }} placeholder="Enter Task Name" />
                       <small id="" className="form-text text-muted">We'll never share your email with anyone else.</small>
                   </div>
   
                   <div className="form-group">
                       <label htmlFor="members">Members</label>
                       <input type="number" id="members" className="form-control" aria-describedby="emailHelp" value={members} onChange={(e) => { setmembers(e.target.value) }} placeholder="Enter No. Members" />
                       <small id="" className="form-text text-muted">We'll never share your email with anyone else.</small>
                   </div>
                   <button type="submit" className="btn-sm btn-success my-3">Submit</button>
               </form>
   
           </div>
       )
   }

标签： javascriptreactjslocal-storage

解决方案

您的使用inittodos和useEffect使用有问题。

我修改了您的 App 组件，但尚未经过测试。尝试这样的事情：


function App() {
  const localTodos = localStorage.getItem("todoslist");
  const [todoslist, settodos] = useState([]);

  const addtodo = (task, task_name, members) => {
    let newtodo = {
      task: task,
      task_name: task_name,
      members: members
    };

    const newTodos = [...todoslist, newtodo];

    settodos(newTodos);

    // Side-effect when adding todo: save to localStorage.
    localStorage.setItem("todoslist", JSON.stringify(newTodos));
  }

  // When component loaded, get from localStorage and save to App state.
  useEffect(() => {
    if (localTodos && localTodos !== null) {
      settodos(JSON.parse(localTodos));
    }
  }, [])

  return (
    <>
      <Header title="Learnig-React" search_bar={true} />
      <Addtodo addtodo={addtodo} />
      <Todos todos={todoslist} ondelete={ondelete} />
      <Footer />
    </>
  );
}

提示：用于console.log调试您的代码。这比仅仅猜测要好。

推荐阅读