Javascript 使用唯一ID从处于状态的数组中删除对象

我列出了必须删除的元素，例如，使用delete按钮。我怎样才能从反应中认识到这一点

这是我的状态：

state = {
        infos: [
            {
                id: 1,
                info: 'some info',
                deleted: false
            },
            {
                id: 2,
                info: 'some info',
                deleted: false
            },
            {
                id: 3,
                info: 'some info',
                deleted: false
            }
        ]
    }

这是我尝试过的删除函数：

removeInfo() {
  this.state.infos.splice(key, 0)
}

这是我在映射后得到的jsx代码：

{
                      this.state.infos.map((item, key) => {
                          return (
                              <ListItem key={item.key + key}>
                                  <Icon color="gray" f7="home" />
                                  <span className="text-black">{item.info}</span>
                                  <Button><Icon f7="edit" color="#39b549" /></Button>
                                  <Button onClick={this.removeInfo}><Icon color="black" f7="trash" /></Button>
                              </ListItem>
                          )
                      })
                  }

你需要一些改变

首先，我们需要将要删除的项的id传递给remove函数：

 <Button onClick={()=>this.removeInfo(item.id)}><Icon color="black" f7="trash" /></Button>

拼接会使阵列发生变异。

您只需要很少的更改

首先，我们需要将要删除的项的id传递给remove函数：

 <Button onClick={()=>this.removeInfo(item.id)}><Icon color="black" f7="trash" /></Button>

---

splice会使数组发生变异。

您需要使用setState，并注意不能使状态发生变异，因此需要使用spread操作符来创建新数组

function removeInfo(index) {
  this.setState((prev) => ({
    infos: [...prev.infos.slice(0, index), ...prev.infos.slice(index+1)]
  }))
}

---

您需要使用setState并注意不能改变状态，因此需要使用spread操作符来创建新数组

function removeInfo(index) {
  this.setState((prev) => ({
    infos: [...prev.infos.slice(0, index), ...prev.infos.slice(index+1)]
  }))
}

---

非常感谢，这是最短最简单的解决方案！非常感谢，这是最短最简单的解决方案！你的回答也很有帮助。谢谢你的帮助你的回答也很有帮助。谢谢你的帮助