Excluir item da matriz de estados em react

A história é que eu deveria colocar Bob, Sally e Jack em uma caixa. Também posso remover qualquer um da caixa. Quando removido, nenhum slot é deixado.

people = ["Bob", "Sally", "Jack"]

Agora preciso remover, por exemplo, "Bob". A nova matriz seria:

["Sally", "Jack"]

Aqui está o meu componente de reação:

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

Aqui eu mostro um código mínimo, pois há mais (onClick etc). A parte principal é excluir, remover, destruir "Bob" da matriz, mas removePeople()não está funcionando quando chamado. Alguma ideia? Eu estava olhando para isso, mas posso estar fazendo algo errado, pois estou usando o React.

Para remover um elemento de uma matriz, basta:

array.splice(index, 1);

No seu caso:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

Ao usar o React, você nunca deve alterar o estado diretamente. Se um objeto (ou Array, que também é um objeto) for alterado, você deverá criar uma nova cópia.

Outros sugeriram o uso Array.prototype.splice(), mas esse método modifica a matriz, portanto, é melhor não usar splice()com o React.

Mais fácil de usar Array.prototype.filter()para criar uma nova matriz:

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

Aqui está uma pequena variação na resposta de Aleksandr Petrov usando o ES6

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

Use .splicepara remover o item da matriz. Usando delete, os índices da matriz não serão alterados, mas o valor do índice específico seráundefined

O método splice () altera o conteúdo de uma matriz removendo os elementos existentes e / ou adicionando novos elementos.

Sintaxe: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

Editar:

Como apontado por justin-grant , Como regra geral, nunca mude this.statediretamente, pois ligar setState()depois pode substituir a mutação que você fez. Trate this.statecomo se fosse imutável.

A alternativa é criar cópias dos objetos this.statee manipular as cópias, atribuindo-as de volta usando setState(). Array#map, Array#filteretc. podem ser usados.

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

Maneira fácil de excluir o item da matriz de estados em react:

quando qualquer dado é excluído do banco de dados e atualiza a lista sem a API chamar o tempo que você passa o ID excluído para esta função e essa função remove o excluído recuperado da lista

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

Algumas respostas mencionadas usando 'emenda', que fizeram como Chance Smith disse, mutaram a matriz. Eu sugiro que você use a chamada de método 'slice' (o documento para 'slice' está aqui), que faz uma cópia da matriz original.

É muito simples primeiro você define um valor

state = {
  checked_Array: []
}

Agora,

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}

Você esqueceu de usar setState. Exemplo:

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

Mas é melhor usar filterporque não muda a matriz. Exemplo:

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},

removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
    array.splice(index,1);
}

Redfer doc para obter mais informações