React开发ToDoList提交/删除待办后列表不自动渲染问题求助

• 开发场景：使用React开发ToDoList待办清单项目
• 预期效果：提交待办日程、删除待办项操作完成后，页面同步更新展示最新列表
• 异常表现：提交、删除操作执行后待办列表无变化，仅当在输入框内输入内容触发变更时，视图才会更新为最新数据

React组件仅在自身state更新、接收的props更新、绑定的Context值更新时才会触发重渲染，你的代码核心问题如下：

1. 声明了toDoList状态但从未使用，所有增删操作仅修改了localStorage中的持久化数据，没有调用状态更新方法通知React数据发生变化，组件不会主动重渲染。你观察到的“输入时视图更新”，本质是输入事件触发了toDo状态更新，组件重渲染时才读取到了localStorage的最新值，并非增删操作本身触发了视图刷新。
2. 输入框逻辑错误：在onChange回调中每次输入字符就生成带id的完整待办对象存入状态，而非仅同步输入的文本内容，会导致待办id为输入过程中生成的旧时间戳，后续删除匹配id时易出现异常。
3. 存在大量未使用的冗余导入、模块级变量，不符合React单向数据流规范，易引发闭包、状态不一致问题。

• 组件初始化时，读取localStorage的待办数据作为toDoList状态的初始值
• 所有增删操作在更新localStorage的同时，调用setToDoList同步更新组件内部状态，触发视图重渲染
• 拆分输入状态与待办列表状态：输入框仅维护当前输入的文本值，提交表单时再组装带唯一id的完整待办对象加入列表
• 清理未使用的冗余代码，将输入框改为受控组件，提交后自动清空输入内容

import React, { useState } from "react";
import styled from "styled-components";

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;
    padding: 0;
    list-style: none;
`;
const ToDoMem=styled.li`
    font-size: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
`;

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

const RemoveButton=styled.button`
    border:none;
    background-color: transparent;
    color:crimson;
    font-size: 18px;
    cursor: pointer;
`;

const ToDoList_KEY='ToDoList';

function Todo()
{
    // 初始化时直接读取本地存储作为列表初始值
    const [toDoList,setToDoList]=useState(() => {
        const stored = localStorage.getItem(ToDoList_KEY);
        return stored ? JSON.parse(stored) : [];
    });
    // 单独维护输入框的值
    const [inputValue, setInputValue] = useState('');
    
    // 提交待办逻辑
    function handleSubmit(event) {
        event.preventDefault();
        const content = inputValue.trim();
        if (!content) return;
        const newTodo = {
            content,
            id: Date.now()
        };
        const newList = [...toDoList, newTodo];
        // 同步更新状态和本地存储
        setToDoList(newList);
        localStorage.setItem(ToDoList_KEY, JSON.stringify(newList));
        // 提交后清空输入框
        setInputValue('');
    }

    // 输入框同步逻辑
    function handleInputChange(event) {
        setInputValue(event.target.value);
    }
    
    // 删除待办逻辑
    function handleRemove (event)
    {
        const targetId = parseInt(event.currentTarget.id);
        const newList = toDoList.filter((mem) => mem.id !== targetId);
        // 同步更新状态和本地存储
        setToDoList(newList);
        localStorage.setItem(ToDoList_KEY, JSON.stringify(newList));
    }

    return(
        <ToDoContainer>
            <TodoForm onSubmit={handleSubmit}>    
                <TodoInput 
                    value={inputValue}
                    onChange={handleInputChange} 
                    type="text" 
                    placeholder="Schedule"
                />
            </TodoForm>
            <TodoList>
                {   
                    toDoList.map((mem) => (
                        <ToDoMem key={mem.id}>
                            {mem.content}
                            <RemoveButton 
                                id={mem.id}
                                onClick={handleRemove}
                            >
                                X
                            </RemoveButton>
                        </ToDoMem>
                    ))
                }
            </TodoList>
        </ToDoContainer>
    );
}

export default Todo;

内容的提问来源于stack exchange，提问作者KIMKIMKIM