Javascript 反应拼接子组件故障

我有（例如）2个组件。当然，其中一个是父母，另一个是父母的孩子。 我的目标是逐个按钮删除组件，但当我按下子组件内的delete按钮时，函数将删除下一个组件。也许我忘了什么

例如： [[1]、[2]、[3]]-这是一个与另一个数组嵌套的数组。我想删除[2]（parentArray[1]）。但是删除函数删除[3]（parentArray[2]），我有[[1]、[2]]。那是我的麻烦

父组件：

从“React”导入React
从“./Kanban.module.scss”导入类
从“./Card/Card.js”导入卡片
导出默认类看板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
卡片：[
]
}
this.createCardHandler=this.createCardHandler.bind（this）；
this.deleteCardHandler=this.deleteCardHandler.bind（this）；
}
createCardHandler（）{
这是我的国家({
卡片：this.state.cards.concat（{id:this.state.cards.length}）
})
}
deleteCardHandler（索引）{
this.setState（prevState=>{
let cards=[…prevState.cards]
卡片.拼接（索引，1）
返回{
卡片：卡片
}
})
}
render（）{
设cards=null；
cards=this.state.cards.map（（cards，id）=>{
返回(
)
})
返回(
+
{卡片}
)
}
}

子组件：

从“React”导入React
从“./Card.module.scss”导入类
从“./List/List.js”导入列表
导出默认类别卡扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
名单：[]
}
this.CreateListButton=this.CreateListButton.bind（this）；
}
CreateListButton（）{
这是我的国家({
列表：this.state.lists.concat（'List'））
})
}
deleteListHandler（索引）{
let lists=[…this.state.lists]
列表.拼接（索引，1）
这是我的国家({
列表
})
}
render（）{
let list=null
lists=this.state.lists.map（（列表，索引）=>{
返回(
)
})
返回(
✖
{lists}
创建新列表
)
}
}

请将索引道具添加到子组件中

cards = this.state.cards.map((card, index) => {
  return (
    <Card
      index={card.id}
      id={card.id}
      //Here i giving child component function from parent component
      onDelete={this.deleteCardHandler.bind(this, index)}
    />
  )
})

cards=this.state.cards.map（（卡片，索引）=>{
返回(
)
})

问题在于删除处理程序。最初，看板类的状态为[]。然后，假设您添加4张卡，它将成为

[{id:0}，{id:1}，{id:2}，{id:3}]

所以，如果你删除了第二张卡，你的新状态变成

[{id: 0}, {id: 2}, {id: 3}]

现在，如果您尝试删除第三张卡，即id=2，那么处理程序将从状态中删除index 2元素，即id为3的元素。因此，您单击的元素，下一个元素将被删除。 不要依赖数组索引（一旦删除任何卡，此映射将不起作用），请依赖您为卡创建的id。您编写删除处理程序的方式不正确。这里有一个解决方案，应该可以解决这个问题

deleteCardHandler(index) {
    this.setState(previousState => previousState.filter(card => card.id !== index))
}

---

这基本上返回一个数组，其中包含除单击删除的元素外的所有元素。希望对你有帮助

你好!！我理解，但我需要更改删除卡片的功能，而不是列表。我认为看板组件中的所有问题，包括卡片组件。所以要理解结构：看板->卡片->列表。看板可以包含：看板->卡片|卡片|卡片。我需要了解如何正常删除卡片。如果有人能向我解释这一点，我只需更改列表删除方法：）（对不起，我是俄罗斯人：））请为您的子组件添加

索引
道具谢谢您的帮助，我在里面添加了道具，但仍然不起作用=（您能用更新的代码更新您的问题吗