使用过滤器搜索数组时，react组件消失

Question

我有一组学生，他们能够为每个学生添加一个标签。标签系统运行得很好，但当我使用搜索时，如果当我返回到原始列表(从搜索栏中删除(时，学生被从搜索中筛选出来，标签组件就会消失。标记仍在学生对象中，但不会再次渲染。我想这是因为我的搜索逻辑，但我似乎无法弄清楚。

搜索功能

useEffect(() => {
const filterStudents = () => {
if(Object.values(searchQuery).some((term) => !!term)) {
const keys = Object.keys(searchQuery);
let newStudentList = students;
console.log(newStudentList);
keys.forEach((key) => {
switch(key) {
case "name": 
newStudentList = newStudentList.filter((student) => {
const name = student.firstName.concat(" ", student.lastName).toLowerCase();
return name.includes(searchQuery.name);
});
break;
case "tag":
newStudentList = newStudentList.filter((student) => {
const tags = student.tags;
console.log("Tags " + tags + "nSearch query " + searchQuery.tag);
if(tags !== undefined) {
return tags.includes(searchQuery.tag);
}

return true;
})
break;
default:
break;
}
})
return newStudentList;
}
else {
return students;
}
}
setSearchResults(filterStudents());
}, [students, searchQuery]);

学生组件

const Student = ({ student, onUpdateStudent }) => {
const [btnOpen, setBtnOpen] = useState(false);
const averageGrade = (grades) => {
let total = 0;
let count = 0;
let average;

for(const grade of grades) {
total += +grade;
count++;
}
average = total / count;
return Math.round(average * 1000) / 1000;
};

const studentAverage = averageGrade(student.grades);
const openScores = (isOpen) => {
setBtnOpen(isOpen);
};
const onAddTag = (tags) => {
const updatedStudent = { ...student, tags: tags };
onUpdateStudent(updatedStudent);
}

const onDeleteTag = (tags) => {
const updatedStudent = { ...student, tags: tags };
onUpdateStudent(updatedStudent);
}


return (
<div className="student grid">
<div className="student-image">
<img className="" src={student.pic} alt="Student" />
</div>
<aside className="student-info">
<div className="flex">
<p className="fs-700 fw-bold">{ student.firstName } { student.lastName }</p>
<ScoreButton btnOpen={btnOpen} onClick={openScores} />
</div>
<ul>
<li>
<p>Email: { student.email }</p>
</li>
<li>
<p>Company: { student.company }</p>
</li>
<li>
<p>Skill: { student.skill }</p>
</li>
<li>
<p>Average: { studentAverage }%</p>
</li>
</ul>
{btnOpen && <StudentGrades student={student} />}
<Tags onAddTag={onAddTag} onDeleteTag={onDeleteTag} />
</aside>
</div>
)
}

标签和标签组件

const Tags = ({ onAddTag, onDeleteTag }) => {
const [tags, setTags] = useState([]);
const onAdd = (newTag) => {
const newTags = [...tags, newTag];
setTags(newTags);
onAddTag(newTags);
}
const onDelete = (tagDelete) => {
const newTags = tags.filter((tag) => tag !== tagDelete);
setTags(newTags);
onDeleteTag(newTags);
}


return (
<div className="tags">
<div className="tags-list">
{tags.length > 0 && tags.map((tag) => (
<Tag key={tag} tag={tag} onDeleteTag={onDelete} />
))}
</div>
<AddTag onAddTag={onAdd} />
</div>
)
}
export default Tags

const Tag = ({ tag, onDeleteTag }) => {
return (
<div className="tag">
{ tag }
<i className="fas fa-times fa-sm" onClick={() => onDeleteTag(tag)}></i>
</div>
)
}
export default Tag

只是标签组件似乎消失了。我可以添加另一个标记，没有问题，但那里的标记列表不会再次呈现。希望这是有意义的，任何帮助都非常感谢！

Answer 1

我意识到我没有将标记传递到标记组件中，以便它们再次渲染。我正在通过将student传递到tags组件或将tags状态提升到student组件来解决问题。