组件在重新渲染时失去功能

Question

这是我的 React Hook：

import {React, useEffect, useState} from "react";
import './Student.css';

function Student(props){

    const [open, setOpen] = useState(false);
    const [tags, setTags] = useState([]);
    let match = searchQuery(props.nameSearch, props.student.firstName, props.student.lastName, props.tagSearch, tags);
    useEffect(()=>{
        let input = document.getElementById(tagBar);
        input.addEventListener("keyup", function(event) {
        if (event.keyCode === 13) {
            event.preventDefault();
            document.getElementById(tagButton).click();
        }
        });

        
        match = searchQuery(props.nameSearch, props.student.firstName, props.student.lastName, props.tagSearch, tags);

    },[tags])

    const handleClick = () => {
        setOpen(!open);
    };

    function addTag(){
        let input = document.getElementById(tagBar);
        let tagList = tags;
        if (input.value != ""){
            setTags([...tagList, input.value]);
            input.value = "";
        }
    }

    function searchQuery(nameSearch, firstName, lastName, tagSearch, tags){
        let foundName = false;
        let foundTag = false;
        if (nameSearch == ""){
            foundName = true;
        }
        if (tagSearch == ""){
            foundTag = true;
        }

        if (firstName.toLowerCase().includes(nameSearch) || lastName.toLowerCase().includes(nameSearch)) {
            foundName = true;
        }

        tags.forEach(t => {
            if (t.includes(tagSearch)) {
                foundTag = true;
            }
        })

        return (foundName && foundTag);
    }

    let avg = 0;
    props.student.grades.forEach(grade => avg += parseInt(grade));
    avg = avg/(props.student.grades.length);

    let tagBar = "tagBar"+props.student.id;
    let tagButton = "tagButton"+props.student.id;

    let tagDisplay = tags.map((t, index) => {
        return <span key={t+index} className="tag">{t}</span>;
    })

    return(
        <div>
            {match ? 
                <div key={props.student.id} className="student">
                    <div className="avatar">
                        <img src={props.student.pic}></img>
                    </div>
                    <div className="info">
                        <div className="fullName">
                            {props.student.firstName.toUpperCase()} {props.student.lastName.toUpperCase()}
                        </div>
                        <div className="nonName">
                            <div>
                                Email: {props.student.email}
                            </div>
                            <div>
                                Company: {props.student.company}
                            </div>
                            <div>
                                Skill: {props.student.skill}
                            </div>
                            <div>
                                Average: {avg}%
                            </div>
                            <div>
                                {open ?
                                    <ul className="grades">
                                        {props.student.grades.map((grade, index) => {
                                            return (<li key={grade+index}>Test {index+1}: {grade}%</li>)
                                            }
                                        )}
                                    </ul>
                                    :
                                    null
                                }
                            </div>
                            <div className="tags">
                                <div>
                                    {tagDisplay}
                                </div>
                                <input type='text' id={tagBar} className="tagBar" placeholder="Add a Tag"/>
                                <button type="submit" id={tagButton} className="hiddenButton" onClick={addTag}></button>
                            </div>
                        </div>
                    </div>
                    {/* If this was not required to be a button, I would have used + - images */}
                    <button onClick={handleClick}>{!open ? "+" : "-"}</button>
                </div>
                :
                null}
        </div>
    );
}

export default Student;

TL:DR - 我的组件基本上加载了一堆学生数据，并允许我为每个数据添加标签。 然后，我可以根据学生的姓名或与其关联的标签筛选出要加载的学生。

首次加载时 - 一切正常 问题：在我开始过滤掉学生（并且他们取消渲染）之后，当我通过清除搜索查询将他们带回来时，那些消失的学生无法再添加新标签。只要没有过滤掉任何学生，他们就可以继续添加更多标签。搜索功能本身在整个过程中都按预期工作。是什么导致了这个问题？以及为什么因为它对我来说真的没有意义为什么我会突然失去功能