我尝试开始学习react，但无法理解基本逻辑。我有一个待办事项列表页面，带删除线可以正常工作，但如果我尝试将删除线改为REMOVE，我的应用程序在点击时消失。下面是我的代码，希望你能理解：

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

    function onNoteClick(event) {
        const { value, id } = event.target
        //setStrikeThrough((prev) => !prev) - the strike through which is canceled right now
        onClickSetter(prev => prev.filter(aNote => aNote.id !== id)) // why this doesn't work?
    }

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

字符串
关于我的props的一点解释：notes --字面上的注解列表，来自父组件上的useState（根据我对react的理解，我们不应该触及这个）
备注-自备注信息
onClickSetter -useState的另一部分，setter。
所以换句话说，我有保存所有注解的注解，而onClickSetter换句话说就是setNotes -两者都是useState的一部分
除此之外，我还有一个注解信息，因为这是一个注解组件
父组件：

function Body() {

    const [Notes, setNotes] = useState([])

    
    return (
        <div className='notes-body'>
            <NewNote onClickSetter={setNotes}/>
            {Notes.map((note) => { return <Note key={note.id} notes={Notes} note={note} onClickSetter={setNotes}/>})}
        </div>
    )
}

function NewNote({ onClickSetter }) {

    const [input, setInput] = useState('')

    function onInputChange(event) {
        const { value } = event.target
        setInput(value)
    }

    function onButtonClick(event) {
        onClickSetter((prev) => {
            try {
                return [...prev, {input: input, id: prev[prev.length-1].id+1}]
            }catch{
                return [{input: input, id: 0}]
            }
        })
        setInput('')
    }

    return (
        <>
            <Input placeholder="add new note" className='note-text' onChange={onInputChange} value={input}/>
            <Button className='btn btn-primary add-note' onClick={onButtonClick} />
        </>
    )
}

的数据