qual é a maneira preferida de transformar um estado de reação?

97

Digamos que eu tenha uma lista de objetos simples na minha this.state.listque posso usar para renderizar uma lista de filhos. Qual é então a maneira certa de inserir o objeto this.state.list?

Abaixo está a única maneira que acho que funcionará, porque você não pode alterar o this.statediretamente conforme mencionado no documento.

this._list.push(newObject):
this.setState({list: this._list});

Isso me parece feio. Existe uma maneira melhor?

javascript reactjs

— Khoi
fonte

possível duplicata de modificação correta de matrizes de estado no ReactJS , solicitando fusão

— Brigand

Todas essas respostas são sobre como adicionar um elemento a uma matriz. Mas que tal remover um elemento dele? Ou simplesmente redefinir completamente o array para um novo?

— Augustin Riedinger

165

concat retorna uma nova matriz, então você pode fazer

this.setState({list: this.state.list.concat([newObject])});

outra alternativa é o auxiliar de imutabilidade do React

  var newState = React.addons.update(this.state, {
      list : {
        $push : [newObject]
      }
  });

  this.setState(newState);

— Heap
fonte

6

concatpega um array, então você vai querer this.state.list.concat([newObject]).

— Sophie Alpert

@BenAlpert funciona para mim no Chrome, você está dizendo que este é um comportamento fora do padrão?

— Heap

6

@Heap Bem, se você passar um não-array para concatele irá envolvê-lo em um array, mas é melhor adicionar o array você mesmo para ser explícito: se você tem [[1,2], [3,4]]e deseja adicionar [5,6]como o próximo elemento, você precisa fazer .concat([[5,6]])outra coisa vai acabar com [[1,2], [3,4], 5, 6].

— Sophie Alpert

2

Por mais que eu aprecie a ideia por trás dos ajudantes de imutabilidade (e posso acabar usando de qualquer maneira), com Array.concatcerteza é melhor adicionar outra biblioteca.

— Shawn Erquhart

1

Chamar this.setState com um valor derivado de this.state fará com que você tenha problemas de atualização em lote. Consulte stackoverflow.com/a/41445812/1998186 que leva a um jsfiddle mostrando o problema que você encontrará.

— NealeU

40

setState () pode ser chamado com uma função como parâmetro:

this.setState((state) => ({ list: state.list.concat(newObj) }))

ou em ES5:

this.setState(function(state) {
  return {
   list: state.list.concat(newObj)
  }
})

— Nyalab
fonte

2

@Arian: React executará as instruções de mutação DOM necessárias para renderizar apenas os elementos recém-adicionados. Dado, é claro, que você adicionou elementos recentemente, não mudam a forma como os elementos anteriores eram renderizados.

— Jose Browne

1

Esta é uma resposta fantástica e parece muito mais limpa do que concatenar array apenas para executar um push, embora essa seja a opinião, eu acho.

— Matt Styles

2

@Nyalab você não deveria envolver o corpo da função entre parênteses? Como está agora em seu exemplo, os colchetes após a seta grande iniciariam um bloco, não um objeto. Algo assim:this.setState((state) => ({ list: state.list.push(newObj) }))

— kumarharsh

3

Como esse código está funcionando? o método push retornará um NUMBER, que será definido na listvariável

— kumarharsh

1

Você também pode usar um splat:this.setState((state) => ({ list: [...state.list, newObj] }))

— amebe

19

Atualização 2016

Com ES6 você pode usar:

this.setState({ list: [...this.state.list, ...newObject] });

— Ashish Chaudhary
fonte

5

...[newObject]é o mesmo que justo newObject.

— amebe

2

Isso não funcionará para atualizações em lote. Veja meu exemplo em stackoverflow.com/a/41445812/1998186 .

— NealeU

7

A partir dos documentos react ( https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ):

Como this.props e this.state podem ser atualizados de forma assíncrona, você não deve confiar em seus valores para calcular o próximo estado.

Então, você deve fazer isso:

this.setState((prevState) => ({
  contacts: prevState.contacts.concat([contact])
}));

— jcgzzc
fonte