Javascript React子组件赢得'；t卸载（重新出现）

我在React（下面提供的文件）中遇到了一个问题。我正在尝试生成一组子组件，并希望能够删除这些组件。我有一个状态参数

this.state.lipides

，它包含一个对象数组，我使用这些参数在

中生成几个

组件。生成组件并执行其应执行的操作，但拒绝移除的情况除外

当我通过

removeLipid（index）

删除一个元素来更改我的

this.state.lipses

数组时，它会触发一个重新渲染，出于某种原因，它会神奇地生成我刚才删除的组件

我尝试将责任提升到父级

，但问题仍然存在

请帮帮我

RatioCoupledDataLists.jsx

class RatioCoupledDataLists扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
类脂：[{value:null，上叶：1，下叶：1}]
}
this.registerLipid=this.registerLipid.bind（this）；
this.addLipid=this.addLipid.bind（this）；
this.removeLipid=this.removeLipid.bind（this）；
}
注册脂（指数，脂质）{
风险值=[]；
脂类=lipses.concat（this.state.lipses）；
脂质[指数]=脂质；
this.setState（{lipses:lipses}）；
this.state.lipses[索引]=脂质；
}
addLipid（）{
var-mapping={value:null，upperLeaf:1，lowerLeaf:1}；
this.setState（{lipses:this.state.lipses.concat（mapping）}）；
}
removeLipid（索引）{
风险值=[]；
脂类=lipses.concat（this.state.lipses）；
脂质。剪接（指数1）；
this.setState（{lipses:lipses}）；
}
render（）{
var itemIsLast=函数（索引，len）{
如果（索引+1==len）{
//最后一项
返回true；
}
返回false；
}
var makeLipidSelects=函数（）{
var-alllipses=[]；
for（var i=0；i

datalistcupledinput.jsx

类DataListCoupledInput扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
value:this.props.lipide.value，
活动：this.props.isFinal，
upperLeaf:this.props.lipide.upperLeaf，
洛厄拉夫：这个。道具。脂质。洛厄拉夫
}
this.handleChange=this.handleChange.bind（this）；
this.registerLeafletValue=this.registerLeafletValue.bind（this）；
this.registerLipid=this.registerLipid.bind（this）；
}
注册脂（脂质）{
this.props.fr（this.props.id，脂质）；
}
手变（活动）{
registerLipid（{value:event.target.value，upperLeaf:this.state.upperLeaf，lowerLeaf:this.state.lowerLeaf}）；
this.setState（{value:event.target.value}）；
}
登记册式价值（单张）{
如果（传单名称==“上限比例”）{
registerLipid（{value:this.state.value，upperLeaf:传单.value，lowerLeaf:this.state.lowerLeaf}）；
this.setState（{upperLeaf:传单.value}）；
}
如果（传单名称==“lowerRatio”）{
this.registerLipid（{value:this.state.value，upperLeaf:this.state.upperLeaf，lowerLeaf:传单.value}）；
this.setState（{lowerLeaf:floaple.value}）；
}
}
render（）{
var canEdit=函数（）{
if（this.props.isFinal==true）{
返回；
}否则{
返回{this.state.value}
}
}
canEdit=canEdit.bind（这个）；
var addOrRemove=函数（）{
如果（this.props.isFinal！==true）{
返回{this.props.remove（this.props.id）}>-；
}否则{
返回+；
}
}
addOrRemove=addOrRemove.bind（这个）；
返回(
{canEdit（）}
:
{addOrRemove（）}
{this.props.description}
)
}
}

如果在remove函数中的

setState

前面放一个console.log语句，那么

的值是否是您期望的值？（列表减去单击的元素）？而且它看起来像是在
datalistcupledinput
中复制了很多代码。为什么要将父道具复制到localstate而不是直接使用父道具？@azium a
console.log
在
setState
显示减去元素的列表之前。