Зберігання об’єкта у стані компонента React?

Чи можна зберігати об'єкт у стані компонента React? Якщо так, то як ми можемо змінити значення ключа в цьому об’єкті за допомогою setState? Я думаю, що синтаксично не дозволяється писати щось на зразок:

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

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

Ви можете створити простий об'єкт, який вміщує всі ці змінні, і розмістити його на рівні компонента, подібно до того, як ви оголошуєте будь-які методи на компоненті.

Дуже ймовірно трапляються ситуації, коли ви включаєте багато комерційної логіки у свій код, і для цього потрібно використовувати багато змінних, значення яких змінюються кількома методами, а потім ви змінюєте стан компонента на основі цих значень.

Отже, замість того, щоб зберігати всі ці змінні в стані, ви зберігаєте лише ті змінні, значення яких повинні бути безпосередньо відображені в інтерфейсі користувача.

Якщо такий підхід кращий за перше запитання, яке я написав тут, тоді мені не потрібно зберігати об’єкт у стані.

На додаток до публікації kiran, є помічник оновлення (раніше аддон реагування ). Це можна встановити за допомогою 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
}

1. 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});
   

2. Ви можете мати звичайні змінні, якщо вони не покладаються на this.props і this.state.

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

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

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

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

Простіше це зробити в одному рядку коду

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