javascript - portugues - react page



Armazenando um objeto no estado de um componente React? (4)

  1. this.setState({ abc.xyz: 'new value' }); sintaxe não é permitida. Você tem que passar o objeto inteiro.

    this.setState({abc: {xyz: 'new value'}});

    Se você tiver outras variáveis ​​em abc

    var abc = this.state.abc;
    abc.xyz = 'new value';
    this.setState({abc: abc});
  2. Você pode ter variáveis ​​comuns, se elas não confiarem em this.props e this.state .

https://src-bin.com

É possível armazenar um objeto no estado de um componente React? Se sim, como podemos alterar o valor de uma chave nesse objeto usando setState ? Eu acho que não é permitido sintaticamente escrever algo como:

this.setState({ abc.xyz: 'new value' });

Em linhas semelhantes, tenho outra pergunta: é bom ter um conjunto de variáveis ​​em um componente React para que elas possam ser usadas em qualquer método do componente, em vez de armazená-las em um estado?

Você pode criar um objeto simples que contenha todas essas variáveis ​​e colocá-lo no nível do componente, exatamente como declararia quaisquer métodos no componente.

É muito provável que encontre situações em que você inclua muita lógica de negócios em seu código e isso exija o uso de muitas variáveis ​​cujos valores sejam alterados por vários métodos e, em seguida, você altere o estado do componente com base nesses valores.

Portanto, em vez de manter todas essas variáveis ​​no estado, você apenas mantém aquelas variáveis ​​cujos valores devem ser refletidos diretamente na interface do usuário.

Se essa abordagem for melhor que a primeira pergunta que escrevi aqui, não preciso armazenar um objeto no estado.


Answer #1

Além da publicação de kiran, há o auxiliar de atualização (anteriormente um addon de reação ). Isso pode ser instalado com o npm usando o npm install immutability-helper

import update from 'immutability-helper';

var abc = update(this.state.abc, {
   xyz: {$set: 'foo'}
});

this.setState({abc: abc});

Isso cria um novo objeto com o valor atualizado e outras propriedades permanecem as mesmas. Isso é mais útil quando você precisa fazer coisas como enviar para uma matriz e definir outro valor ao mesmo tempo. Algumas pessoas o usam em qualquer lugar porque fornece imutabilidade.

Se você fizer isso, poderá ter o seguinte para compensar o desempenho de

shouldComponentUpdate: function(nextProps, nextState){
   return this.state.abc !== nextState.abc; 
   // and compare any props that might cause an update
}

Answer #2

Mesmo que isso possa ser feito via auxiliar de imutabilidade ou similar, não quero adicionar dependências externas ao meu código, a menos que realmente precise. Quando preciso fazer isso, uso Object.assign . Código:

this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})})

Também pode ser usado em atributos de eventos HTML, por exemplo:

onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})}

Answer #3

Você pode usar a dispersão do ES6 em valores anteriores no objeto para evitar a substituição

this.setState({
     abc: {
            ...this.state.abc,
            xyz: 'new value'
           }
});




reactjs