Javascript React:DOM不以动态形式反映组件状态

这是一个学生详细信息的动态表单，可以使用“+”和“X”按钮添加或删除新的学生字段。（即，学生字段的数量由用户决定）。这里，应用程序=>父组件和学生组件=>子组件

问题：单击任何“X”按钮时，仅删除最后一个学生字段（在DOM中），而不是应该删除的字段。但最重要的是，父组件状态会正确更改，并从中删除正确的学员详细信息。此状态更改没有反映在DOM中

代码沙盒：

应用程序组件：

class App extends React.Component {
  constructor(props) {
    super(props)
    let studentsFormElementsTemp = []
    let tempSTUDENTS = {0: ["", ""]}
    this.state = {
      STUDENTS: tempSTUDENTS
    }
    studentsFormElementsTemp.push(<StudentsFormElement id="0" student={this.state.STUDENTS[0]} onStudentsChange={this.onStudentsChange} />)
    this.state = {
      studentsFormElements: studentsFormElementsTemp,
      studentsElementsIdArray: [0],
      STUDENTS: tempSTUDENTS
    } 
  }

  render() {
    return (
        <div>
            <h2 style={{textAlign: "center", display: "inline-block"}}>Students</h2><Button id="+" style={{display: "inline-block"}} variant="success" onClick={this.onStudentsChange}>+</Button>
            <form>
                {this.state.studentsFormElements}
            </form>
            <p>{JSON.stringify(this.state.STUDENTS)}</p>
        </div>
    )
  }

  onStudentsChange = (e) => {
    if (e.target.name === "studentId" || e.target.name === "studentName") { //HANDLING TYPED CHARACTERS.
      let tempSTUDENTS = this.state.STUDENTS
      if (e.target.name === "studentId") {
        tempSTUDENTS[e.target.id][0] = e.target.value
      }
      else {
        tempSTUDENTS[e.target.id][1] = e.target.value
      }
      this.setState({
        STUDENTS: tempSTUDENTS
      })
    } else { 
      let studentsFormElementsTemp = this.state.studentsFormElements
      let studentsElementsIdArrayTemp = this.state.studentsElementsIdArray
      let tempSTUDENTS = this.state.STUDENTS
      if (e.target.id === "+") { //ADDING (+) STUDENT
        tempSTUDENTS[studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1] = ["", ""]
        this.setState({
          STUDENTS: tempSTUDENTS
        })
        studentsFormElementsTemp.push(<StudentsFormElement id={studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1} student={this.state.STUDENTS[studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1]} onStudentsChange={this.onStudentsChange} />)
        studentsElementsIdArrayTemp.push(studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1)
        this.setState({
            studentsFormElements: studentsFormElementsTemp,
            studentsElementsIdArray: studentsElementsIdArrayTemp
        })
      } else { //DELETING STUDENT (X)
        let studentIndex = studentsElementsIdArrayTemp.indexOf(parseInt(e.target.id))
        studentsFormElementsTemp.splice(studentIndex, 1)
        studentsElementsIdArrayTemp.splice(studentIndex, 1)
        delete tempSTUDENTS[e.target.id]
        this.setState({
            studentsFormElements: studentsFormElementsTemp,
            studentsElementsIdArray: studentsElementsIdArrayTemp,
            STUDENTS: tempSTUDENTS
        })
      }
    }
  }
}

class StudentsFormElement extends React.Component {
  render() {
    return (
      <InputGroup className="mb-3">
        <FormControl name="studentId" id={this.props.id} defaultValue={this.props.student[0]} placeholder="Id" onChange={this.props.onStudentsChange} />
        <FormControl name="studentName" id={this.props.id} defaultValue={this.props.student[1]} placeholder="Name" onChange={this.props.onStudentsChange} />
        <InputGroup.Append style={{display: "inline-block"}}>
          <Button id={this.props.id} variant="danger" onClick={this.props.onStudentsChange}>X</Button>
        </InputGroup.Append>
      </InputGroup>
    )
  }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
让学生FormElementsTemp=[]
让tempSTUDENTS={0:[“”，“”]}
此.state={
学生：临时学生
}
studentsFormElementsTemp.push（）
此.state={
学生构成要素：学生构成要素STEMP，
StudentSelementSidaray:[0]，
学生：临时学生
} 
}
render（）{
返回(
学生+
{this.state.studentsFormElements}
{JSON.stringify（this.state.STUDENTS）}

)
}
onStudentsChange=（e）=>{
如果（e.target.name==“studentId”| | e.target.name==“studentName”）{//处理键入的字符。
让tempSTUDENTS=this.state.STUDENTS
如果（e.target.name==“studentId”）{
tempSTUDENTS[e.target.id][0]=e.target.value
}
否则{
tempSTUDENTS[e.target.id][1]=e.target.value
}
这是我的国家({
学生：临时学生
})
}否则{
让studentsFormElementsTemp=this.state.studentsFormElements
让StudentSelementSidarayTemp=this.state.StudentSelementSidaray
让tempSTUDENTS=this.state.STUDENTS
如果（e.target.id==“+”）{//添加（+）学生
临时学生[StudentSelementSidarayTemp[StudentSelementSidarayTemp.length-1]+1]=[“”，“”]
这是我的国家({
学生：临时学生
})
studentsFormElementsTemp.push（）
studentselementsidaraytemp.push（studentselementsidaraytemp[studentselementsidaraytemp.length-1]+1）
这是我的国家({
学生构成要素：学生构成要素STEMP，
studentselementsidaray:studentselementsidaraytemp
})
}else{//删除学生（X）
让studentIndex=studentSelementSidarayTemp.indexOf（parseInt（e.target.id））
studentsFormElementsTemp.拼接（studentIndex，1）
StudentSelementSidarayTemp.拼接（studentIndex，1）
删除临时学生[e.target.id]
这是我的国家({
学生构成要素：学生构成要素STEMP，
studentselementsidaray:studentselementsidaraytemp，
学生：临时学生
})
}
}
}
}

StudentsFormElement组件：

class App extends React.Component {
  constructor(props) {
    super(props)
    let studentsFormElementsTemp = []
    let tempSTUDENTS = {0: ["", ""]}
    this.state = {
      STUDENTS: tempSTUDENTS
    }
    studentsFormElementsTemp.push(<StudentsFormElement id="0" student={this.state.STUDENTS[0]} onStudentsChange={this.onStudentsChange} />)
    this.state = {
      studentsFormElements: studentsFormElementsTemp,
      studentsElementsIdArray: [0],
      STUDENTS: tempSTUDENTS
    } 
  }

  render() {
    return (
        <div>
            <h2 style={{textAlign: "center", display: "inline-block"}}>Students</h2><Button id="+" style={{display: "inline-block"}} variant="success" onClick={this.onStudentsChange}>+</Button>
            <form>
                {this.state.studentsFormElements}
            </form>
            <p>{JSON.stringify(this.state.STUDENTS)}</p>
        </div>
    )
  }

  onStudentsChange = (e) => {
    if (e.target.name === "studentId" || e.target.name === "studentName") { //HANDLING TYPED CHARACTERS.
      let tempSTUDENTS = this.state.STUDENTS
      if (e.target.name === "studentId") {
        tempSTUDENTS[e.target.id][0] = e.target.value
      }
      else {
        tempSTUDENTS[e.target.id][1] = e.target.value
      }
      this.setState({
        STUDENTS: tempSTUDENTS
      })
    } else { 
      let studentsFormElementsTemp = this.state.studentsFormElements
      let studentsElementsIdArrayTemp = this.state.studentsElementsIdArray
      let tempSTUDENTS = this.state.STUDENTS
      if (e.target.id === "+") { //ADDING (+) STUDENT
        tempSTUDENTS[studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1] = ["", ""]
        this.setState({
          STUDENTS: tempSTUDENTS
        })
        studentsFormElementsTemp.push(<StudentsFormElement id={studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1} student={this.state.STUDENTS[studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1]} onStudentsChange={this.onStudentsChange} />)
        studentsElementsIdArrayTemp.push(studentsElementsIdArrayTemp[studentsElementsIdArrayTemp.length - 1] + 1)
        this.setState({
            studentsFormElements: studentsFormElementsTemp,
            studentsElementsIdArray: studentsElementsIdArrayTemp
        })
      } else { //DELETING STUDENT (X)
        let studentIndex = studentsElementsIdArrayTemp.indexOf(parseInt(e.target.id))
        studentsFormElementsTemp.splice(studentIndex, 1)
        studentsElementsIdArrayTemp.splice(studentIndex, 1)
        delete tempSTUDENTS[e.target.id]
        this.setState({
            studentsFormElements: studentsFormElementsTemp,
            studentsElementsIdArray: studentsElementsIdArrayTemp,
            STUDENTS: tempSTUDENTS
        })
      }
    }
  }
}

class StudentsFormElement extends React.Component {
  render() {
    return (
      <InputGroup className="mb-3">
        <FormControl name="studentId" id={this.props.id} defaultValue={this.props.student[0]} placeholder="Id" onChange={this.props.onStudentsChange} />
        <FormControl name="studentName" id={this.props.id} defaultValue={this.props.student[1]} placeholder="Name" onChange={this.props.onStudentsChange} />
        <InputGroup.Append style={{display: "inline-block"}}>
          <Button id={this.props.id} variant="danger" onClick={this.props.onStudentsChange}>X</Button>
        </InputGroup.Append>
      </InputGroup>
    )
  }
}

class StudentsFormElement扩展React.Component{
render（）{
返回(
X
)
}
}

我尝试过的事情：在处理onStudentsChange（）中的“X”按钮之后，我尝试了这个.forceUpdate（），但没有什么区别

---

同样，代码沙盒：

如果您查看以下代码：

<form>{this.state.studentsFormElements}</form>

{this.state.studentsFormElements}

---

我刚刚更改为表单，它工作正常。

如果您查看以下代码：

<form>{this.state.studentsFormElements}</form>

{this.state.studentsFormElements}

---

我刚刚更改为表单，它工作正常。

您必须向

学生表单元素添加
键
道具。如果打开控制台，您可以看到一个错误。我做了两个改变

第12行：
studentsFormElementsTemp.push（）

第53行：
studentsFormElementsTemp.push（）

我还可以指出其他重构，但它们与所提出的问题无关

按照您的要求进行其他重构

从“React”导入React；
从“react bootstrap”导入{InputGroup，FormControl，Button，Form}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
设标识符=0；
此.state={
学生：[
{
标识符：标识符+++，
id:“”，
姓名：“
}
],
标识符
};
}
addStudent=（）=>{
this.setState（（prevState）=>{
const newStudents=[…prevState.students]；
新闻推送({
标识符：prevState.identifier，
id:“”，
姓名：“
});
返回{
标识符：prevState.identifier+1，
学生：新闻学生
};
});
};
onDeleteStudent=（标识符）=>{
console.log（标识符）；
const filteredStudents=this.state.students.filter(
（学生）=>student.identifier！==标识符
);
这是我的国家({
学生：筛选学生
});
};
onInputChange=（事件、字段名、标识符）=>{
const newStudents=[…this.state.students]；
newStudents.forEach（（学生）=>{
if（student.identifier==标识符）{
学生[fieldName]=event.target.value；
}
});
这个.setState（新闻学生）；
};
render（）{
返回(
学生
+
{this.state.students.map（（学生，索引）=>(
))}
{JSON.stringify（this.state.students）}

);
}
}
类StudentsFormElement扩展了React.Component{
render（）{
const{identifier，id，name}=this.props.student；
返回(
{
这个.props.onInp