Javascript 在地图功能内切换显示特定元素onClick

我有一个加号，onClick会变成减号。这样，还将基于切换显示等级列表

目前，当我点击plug标志时，所有元素都会展开显示所有学生的列表。我只想切换特定学生的列表

数据从API中提取，然后显示

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      students: [],
      search: "",
      display: false
    };
  }

_iconOnClick = event => {
    this.state.display ? this.setState({ display: false }) : this.setState({ display: true })
    ;
  };

 _renderDataFromAPI = () => {
//search filter
    let filteredName = this.state.students.filter(student => {
      return (
        student.firstName
          .toLowerCase()
          .includes(this.state.search.toLowerCase()) ||
        student.lastName.toLowerCase().includes(this.state.search.toLowerCase())
      );
    });

    return filteredName.map((student,i) => {
      let average =
        student.grades.reduce((x, y) => parseInt(x) + parseInt(y)) /
        student.grades.length;
      return (
        <div key={i}>
          <div className="data">
            <img className="img" src={student.pic} align="left" />
            {this.state.display ? (
              <FontAwesomeIcon
                style={{
                  float: "right",
                  fontSize: "30px",
                  marginRight: "40px"
                }}
                icon="minus"
                onClick={this._iconOnClick}
              />
            ) : (
              <FontAwesomeIcon
                style={{
                  float: "right",
                  fontSize: "30px",
                  marginRight: "40px"
                }}
                icon="plus"
                onClick={this._iconOnClick}
              />
            )}

            <h1>
              {student.firstName.toUpperCase()} {student.lastName.toUpperCase()}
            </h1>
            <p>Email: {student.email}</p>
            <p>Company: {student.company}</p>
            <p>Skill: {student.skill}</p>
            <p>Average: {average}%</p>
            <br />
            {this.state.display ? (
              <div >
                {student.grades.map((grade, i) => {
                  return (
                    <p key={i}>
                      Test {i + 1}: {grade}%
                    </p>
                  );
                })}
              </div>
            ) : (
              <div />
            )}
          </div>
          <hr style={{ borderColor: "#e2e1e1" }} />
        </div>
      );
    });
  };

class Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
学生：【】，
搜索：“，
显示：假
};
}
_IConClick=事件=>{
this.state.display？this.setState（{display:false}）：this.setState（{display:true}）
;
};
_renderDataFromAPI=（）=>{
//搜索过滤器
让filteredName=this.state.students.filter（student=>{
返回(
学生名
.toLowerCase（）
.includes（this.state.search.toLowerCase（））||
student.lastName.toLowerCase（）.includes（this.state.search.toLowerCase（））
);
});
返回filteredName.map（（学生，i）=>{
平均=
学生成绩减少（（x，y）=>parseInt（x）+parseInt（y））/
学生、年级、长度；
返回(
{this.state.display(
) : (
)}
{student.firstName.toUpperCase（）}{student.lastName.toUpperCase（）}
电子邮件：{student.Email}

公司：{student.Company}

技能：{student.Skill}

平均值：{Average}%



{this.state.display(
{student.grades.map（（grade，i）=>{
返回(

测试{i+1}:{grade}%

);
})}
) : (
)}

);
});
};

将

显示屏

移动到每个学生

let dataFromAPI = getDataFromAPI();
this.setState({ 
    students: dataFromAPI.map(
        student => Object.assign(student, { display: false }) 
});

显示列表

 {student.display ? (
   <div >
     {student.grades.map((grade, i) => { ...

---

将

显示屏

移动到每个学生

let dataFromAPI = getDataFromAPI();
this.setState({ 
    students: dataFromAPI.map(
        student => Object.assign(student, { display: false }) 
});

显示列表

 {student.display ? (
   <div >
     {student.grades.map((grade, i) => { ...

你能分享你的_iconclick函数吗？@JP4刚刚编辑。我建议你创建两个函数来捕捉

展开

和

折叠

事件。另外，你是如何更新值

this.state.search

的？你能分享你的_iconclick函数吗？@JP4刚刚编辑。我建议你创建两个函数来激活ca在

展开

和

折叠

事件上执行tch。另外，您是如何更新值

this.state.search

？您能在此展开吗？我有点困惑您能在此展开吗？我有点困惑