我对 React 的 ToDoList 项目有一些问题

Question

我是学生，我想用 React 制作一个 ToDoList。

我只想在提交或删除我的日程安排时进行更改，但它不起作用。

列表没有改变（没有按照我的意愿呈现），但是如果我在提交框中写下一些东西，它就可以工作了！

我不知道是什么问题。

请帮忙！

（代码又长又脏，对不起，这是我在堆栈溢出中的第一个问题）

import { render } from "@testing-library/react";
import { months } from "moment";
import React, { createElement } from "react";
import { useState } from "react";
import styled from "styled-components";
import createRoot from 'react-dom';


const TodoInput=styled.input`
    font-size:22px;
    border:0;
    background:none;
    appearance:none;
    color:black;
    border-bottom:1px solid black;
    margin-bottom:20px;

`;

const TodoForm=styled.form`
    
`;
const TodoList=styled.ul`
    display:flex;
    flex-direction: column;
    
`;
const ToDoMem=styled.li`

`;

const ToDoContainer=styled.div`
    display:flex;
    flex-direction: column;
    align-items: center;
`;

const RemoveButton=styled.button`
    border:none;
    background-color: transparent;
    color:crimson;
`;

const ToDoList_KEY='ToDoList';

const listContainer=JSON.parse(localStorage.getItem(ToDoList_KEY)); 
let getToDoList=JSON.parse(localStorage.getItem(ToDoList_KEY));
function Todo()
{
    const [toDo,setToDo]=useState();
    const [toDoList,setToDoList]=useState([]);
    const [isScheduled,setIsScheduled]=useState(false);
    
    function preventerAndScheduled(event)
    {
        event.preventDefault();
        let getToDoList=JSON.parse(localStorage.getItem(ToDoList_KEY));
        if(getToDoList==null)
        {
            getToDoList=[];
            getToDoList.push(toDo);
            localStorage.setItem(ToDoList_KEY,JSON.stringify(getToDoList));
            return;
        }
         
        getToDoList.push(toDo);
        localStorage.setItem(ToDoList_KEY,JSON.stringify(getToDoList));
        
    }
    function submitted(event)
    {
        const newToDoObj={
            content: event.target.value,
            id: Date.now()
        }
        setToDo(newToDoObj);
        
    }
    
    function removeWhenClick (event)
    {
        const removeMem=event.target.id;
        let removeList=JSON.parse(localStorage.getItem(ToDoList_KEY));

        removeList=removeList.filter((mem)=>mem.id !== parseInt(removeMem));

        localStorage.setItem(ToDoList_KEY,JSON.stringify(removeList));
    }
   
    getToDoList=JSON.parse(localStorage.getItem(ToDoList_KEY));

    if(getToDoList==null)
    {
        return(
            <ToDoContainer>
                <TodoForm onSubmit={preventerAndScheduled}>    
                    <TodoInput onChange={submitted} type="text" placeholder="Schdule"/>
                </TodoForm>  
            </ToDoContainer>
            );
    }
    else
    {
        return(
            <ToDoContainer>
                <TodoForm onSubmit={preventerAndScheduled}>    
                    <TodoInput onChange={submitted} type="text" placeholder="Schdule"/>
                </TodoForm>
                <TodoList>
                {   
                    getToDoList.map((mem)=><ToDoMem key={mem.id}>{mem.content}
                    <RemoveButton 
                        id={mem.id}
                    onClick={removeWhenClick}>X</RemoveButton></ToDoMem>)
                    
                }
                </TodoList>
            </ToDoContainer>
            );
    }
   
     
    
}

export default Todo;

Answer 1

您的删除和添加待办事项处理函数有问题。 它们可以像这样简化。 请注意，在回调函数中，我们返回组件状态的更新值，并在此之前使用useState钩子的 setter 方法的回调将相同的表示保存到本地存储：

  function preventerAndScheduled(event) {
    event.preventDefault();
    setToDoList((prevTodoList) => {
      const newTodoList = [...prevTodoList, toDo];
      localStorage.setItem(ToDoList_KEY, JSON.stringify(newTodoList));
      return newTodoList;
    });
  }

  function removeWhenClick(removeID) {
    setToDoList((prevTodoList) => {
      const newTodoList = prevTodoList.filter(({ id }) => removeID !== id);
      localStorage.setItem(ToDoList_KEY, JSON.stringify(newTodoList));
      return newTodoList;
    });
  }

在更新状态时使用回调函数总是更好的主意，因为我们总是得到更新的值（非陈旧的）。

您只需要在最初安装组件时从本地存储中加载项目，如下所示：

  const [toDoList, setToDoList] = useState(
    JSON.parse(localStorage.getItem(ToDoList_KEY)) || []
  );

工作演示