如何將單個標簽添加到數組中的某些項目？

Question

我正在遍歷學生列表並將它們顯示在頁面上。 每個學生都可以將標簽添加到他們的容器中，但我的解決方案遇到的問題是，這是添加到每個學生標簽中，而不僅僅是我想要添加到的學生。 我怎樣才能讓這個添加標簽功能對每個學生都是獨一無二的？

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>
          );
        })}
    </>
  );
}

Answer 1

因為您只需全局存儲標簽並為每個學生顯示所有標簽。

這是一種方法，而不是解決方案，我沒有測試任何東西。 只是一個如何去做的提議。 我只希望學生有id 。

更改添加標簽以告知必須添加的學生。 標簽現在是對象，帶有 studentId 和值。

 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>;
})}