Удалить объекты из массива в состоянии, используя уникальный идентификатор

Question

У меня есть список элементов, которые должны быть удалены (например, с помощью кнопки удаления). Как я могу понять это от реакции?

это мой штат:

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>
                          )
                      })
                  }

Answer 1

Вам нужно немного изменений.

Сначала нам нужно передать идентификатор элемента, который мы хотим удалить, в функцию удаления:

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

Затем необходимо удалить элемент из массива неизменным образом, используя setState.

removeInfo(id) {
  this.setState(ps=>({infos:ps.infos.filter(x=>x.id!=id)}))
}

splice мутирует массив.

Answer 2

Вам нужно использовать setState и заметить, что вы не можете изменить состояние, поэтому вам нужно использовать оператор распространения для создания нового массива.

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