Хранение объекта в состоянии компонента React?

Можно ли хранить объект в состоянии компонента React? Если да, то как мы можем изменить значение ключа в этом объекте, используя setState? Я думаю, что синтаксически не разрешено писать что-то вроде:

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

Аналогичным образом, у меня есть еще один вопрос: допустимо ли иметь набор переменных в компоненте React таким образом, чтобы их можно было использовать в любом методе компонента вместо их сохранения в состоянии?

Вы можете создать простой объект, который содержит все эти переменные, и поместить его на уровень компонента, так же, как вы бы объявили любые методы компонента.

Очень вероятно, что вы столкнетесь с ситуациями, когда вы включаете много бизнес-логики в свой код, и это требует использования множества переменных, значения которых изменяются несколькими методами, а затем вы меняете состояние компонента на основе этих значений.

Таким образом, вместо того, чтобы хранить все эти переменные в состоянии, вы сохраняете только те переменные, значения которых должны быть непосредственно отражены в пользовательском интерфейсе.

Если этот подход лучше, чем первый вопрос, который я здесь написал, тогда мне не нужно хранить объект в состоянии.

Ответы

Ответ 1

В дополнение к сообщению kiran, помощник обновления (ранее a реагировать на аддон). Это можно установить с помощью npm, используя npm install immutability-helper

import update from 'immutability-helper';

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

this.setState({abc: abc});

Это создает новый объект с обновленным значением, а остальные свойства остаются неизменными. Это более полезно, когда вам нужно делать такие вещи, как нажимать на массив и одновременно устанавливать другое значение. Некоторые люди используют его везде, потому что он обеспечивает неизменность.

Если вы сделаете это, у вас есть возможность компенсировать производительность

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

Ответ 2

this.setState({ abc.xyz: 'new value' }); синтаксис не допускается. Вы должны передать весь объект.
```
this.setState({abc: {xyz: 'new value'}});
```
Если у вас есть другие переменные в abc
```
var abc = this.state.abc;
abc.xyz = 'new value';
this.setState({abc: abc});
```
Вы можете иметь обычные переменные, если они не полагаются на this.props и this.state.

Ответ 3

Вы можете использовать ES6 распространяться на предыдущие значения в объекте, чтобы избежать перезаписи

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

Ответ 4

this.setState({abc: {xyz: 'new value'}}); НЕ будет работать, поскольку state.abc будет полностью перезаписан, а не объединен.

Это работает для меня:

this.setState((previousState) => {
  previousState.abc.xyz = 'blurg';
  return previousState;
});

Если я неправильно читаю документы, Facebook рекомендует этот формат. https://facebook.github.io/react/docs/component-api.html

Кроме того, я думаю, что самый прямой путь без мутирующего состояния - это прямое копирование с использованием оператора распространения/отдыха ES6:

const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy
newState.xyz = 'blurg';
this.setState(newState);

Ответ 5

Несмотря на то, что это может быть сделано с помощью immutability-helper или подобного, я не хочу добавлять внешние зависимости в мой код, если только мне это не нужно. Когда мне нужно сделать это, я использую Object.assign. Код:

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

Может также использоваться в атрибутах событий HTML, например:

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

Ответ 6

Более простой способ сделать это в одной строке кода

this.setState({object: {...this.state.object, objectVarToChange: newData}})

Ответ 7

Это сработало для меня.

_onPress = () => {
    this.state.abc.xyz = "new value";
    this.setState({});
}

Редактировать:

_onPress = () => {
   let newValue = this.state.abc
   newValue.xyz = "new value"
   this.setState({abc: newValue });
}