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

Question

Возможно ли сохранить объект в состоянии компонента React? Если да, то как мы можем изменить значение ключа в этом объекте, используя setState? Я думаю, что его не синтаксически разрешено писать что-то вроде this.setState({ abc.xyz: 'new value' }); В подобных строках у меня есть другой вопрос: можно ли иметь набор переменных в компоненте React, чтобы они могли использоваться в любом методе компонента, а не храня их в состоянии? Вы можете создать простой объект, который содержит все эти переменные и поместить его на уровне компонента, точно так же, как вы объявляете какие-либо методы в компоненте. Вероятно, он столкнется с ситуациями, когда вы включаете в свой код много бизнес-логики, и для этого требуется использование многих переменных, значения которых изменяются несколькими методами, и затем вы изменяете состояние компонента на основе этих значений. Таким образом, вместо того, чтобы хранить все эти переменные в состоянии, вы сохраняете только те переменные, значения которых должны быть непосредственно отражены в пользовательском интерфейсе. Если этот подход лучше первого вопроса, который я написал здесь, тогда мне не нужно хранить объект в состоянии.

Answer 1

В дополнение к сообщению Кирана, есть update helper (ранее a react addon). Это может быть установлено с помощью 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 
} 

Answer 2

1) this.setState ({abc.xyz: 'новое значение'}); синтаксис не допускается. Вы должны передать весь объект.

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

Если у вас есть другие переменные в аЬс

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

2) Вы можете иметь обычные переменные, если они не опираются на this.props и this.state.

Answer 3

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

Answer 4

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

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

Answer 5

Несмотря на то, что может быть сделано с помощью immutability-helper или подобного я не wan't добавить внешних зависимостей в мой код, если я действительно не придется. Когда мне это нужно, я использую 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'})})} 

Answer 6

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

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