Javascript 如何向数组中的某些项添加单个标记？

我正在循环浏览学生名单，并将其显示在页面上。每个学生都有能力将标签添加到他们的容器中，但我的解决方案存在的问题是，这会将标签添加到每个学生标签中，而不是仅添加到我希望添加的学生。如何使此添加标记功能对每个学生都是唯一的

import logo from "./logo.svg";
import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [student, setStudent] = useState([]);
  const [studentFilter, setFilter] = useState("");
  const [tags, setTags] = useState([]);

  useEffect(() => {
    fetch(api)
      .then((response) => response.json())
      .then((result) => {
        setStudent(result.students);
      })
      .catch((err) => {
        console.error(err);
      });
  }, [setStudent]);

 

  const addTag = (e) => {
    if (e.key == "Enter") {
      setTags([...tags, e.target.value]);
    }
  };

  return (
    <>
      <input
        id="name-input"
        placeholder="Search by name"
        type="text"
        className="filter-students"
        onChange={(e) => setFilter(e.target.value)}
      />

      {student
        .filter(
          (name) =>
            name.firstName.toLowerCase().includes(studentFilter) ||
            name.lastName.toLowerCase().includes(studentFilter)
        )
        .map((students) => {
          let total = 0;
          for (let i = 0; i < students.grades.length; i++) {
            total += parseInt(students.grades[i]);
          }

          const average = total / students.grades.length;

          return (
            <div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                
                  
                  {tags.map((tag) => {
                    return <p className="student-tags">{tag}</p>;
                  })}


                  <input
                    onKeyDown={addTag}
                    className="student-tag"
                    type="text"
                    placeholder="Add a tag"
                  />
                </div>
              </div>

              <button onClick={displayScores} className="expand-btn">
                +
              </button>
            </div>
          );
        })}
    </>
  );
}

从“/logo.svg”导入徽标；
从“React”导入React，{useState，useffect}；
导入“/App.css”；
函数App（）{
const[student，setStudent]=useState（[]）；
常量[studentFilter，setFilter]=useState（“”）；
const[tags，setTags]=useState（[]）；
useffect（（）=>{
获取（api）
.then（（response）=>response.json（））
。然后（（结果）=>{
设置学生（结果：学生）；
})
.catch（（错误）=>{
控制台错误（err）；
});
}，[setStudent]）；
const addTag=（e）=>{
如果（e.key==“输入”）{
setTags（[…tags，例如target.value]）；
}
};
返回(
setFilter（e.target.value）}
/>
{学生
.过滤器(
（姓名）=>
name.firstName.toLowerCase（）.includes（studentFilter）||
name.lastName.toLowerCase（）.includes（studentFilter）
)
.map（（学生）=>{
设total=0；
for（设i=0；i
{" "}
{students.firstName}{students.lastName}

电子邮件：{students.Email}
公司：{students.Company}

技能：{students.Skill}

平均值：{Average}%
{tags.map（（tag）=>{
return
{tag}
；
})}
+
);
})}
);
}

因为您只需全局存储标签，并为每个学生显示所有标签

这是一个方法，不是解决方案，我没有测试任何东西。只是一个如何做的建议。我只希望学生有

id

更改“添加”标记以告知必须添加该标记的学生。标记现在是对象，具有studentId和value

 const addTag = (studentId, e) => {
    if (e.key == "Enter") {
      setTags([...tags, {studentId, value:e.target.value}]);
    }
  };

更改单击处理程序

<input
    onKeyDown={addTag.bind(this, student.id)}
    className="student-tag"
    type="text"
    placeholder="Add a tag"
/>

更改显示方法

{tags.filter(t => t.studentId === student.id).map((tag) => {
    return <p className="student-tags">{tag.value}</p>;
})}

{tags.filter（t=>t.studentId==student.id）.map（（tag）=>{
return
{tag.value}
；
})}

或者你的代码中有一个小的类型

.map（（学生）=>{

你应该写

.map（（学生）=>{

），因为这里一次只有一个学生。非常感谢，这很有意义！学生没有ID，但电子邮件仍然是唯一的