React Todo列表点击删除功能异常：点击后应用消失求助

DevOps 小满

2026-8-24

React Todo列表删除功能导致应用消失的原因及解决方法

问题重现

点击Todo笔记后，笔记列表（应用核心部分）消失，原删除逻辑无法正确匹配要删除的项。

核心问题

你的Note组件中，删除逻辑依赖从event.target获取id，这会导致两个关键问题：

类型不匹配：DOM元素的id是字符串类型，而你的note.id是数字类型。使用!==严格比较时，数字和字符串永远不相等，filter无法匹配到要删除的项，极端场景下可能意外清空整个列表。
target不可靠：如果h1内部有子元素，点击子元素时event.target会指向子元素，无法拿到正确的笔记id。

解决步骤

1. 修改`Note`组件的删除逻辑

直接使用props传入的note.id，无需从事件对象中获取：

function Note({ notes, note, onClickSetter }) {
    const { input, id } = note
    const [strikeThrough, setStrikeThrough] = useState(false);

    function onNoteClick() {
        // 直接使用note的id进行过滤
        onClickSetter(prev => prev.filter(aNote => aNote.id !== id))
    }

    return (
        <>
            <h1 style={ strikeThrough ? {textDecoration: 'line-through'} : { textDecoration: 'none' }} id={id} onClick={onNoteClick}>{input}</h1>
        </>
    )
}

2. 优化`NewNote`组件的ID生成逻辑（可选）

原代码用try catch处理空数组的方式不够直观，改为直接判断数组长度：

function onButtonClick(event) {
    onClickSetter((prev) => {
        // 直接判断数组是否为空，生成新ID
        const newId = prev.length === 0 ? 0 : prev[prev.length - 1].id + 1;
        return [...prev, { input: input, id: newId }];
    });
    setInput('');
}