Как добавить данные в объект (react.js)?

Question

[reactreact]

Есть объект

getInitialState: function() {
  return {
    dob: {
      'month' : 'January',
      'day' : '01',
      'year' : '2015'

  };
},

Как изменить в нём данные, например, для year?
Так не получается this.setState({dob.year: '1980'})

Answer 1

[Андрей Антропов]

Например

this.setState({
    dob: {
         ...this.state.dob,
         year: '1980'
    }
})

Хотя и это можно оптимизировать например используя ramdajs.com/0.18.0/docs/#lens

Answer 2

[Finnish]

В React есть расширения (addons), среди которых можно найти метод React.addons.update. Его использование может показаться слегка необычным:

var newState = React.addons.update(this.state, { 
    dob: { 
        year: { 
            $set: '1980' 
        }
    }
});
this.setState(newState);

Не знаю насколько сейчас это актуально, но тем не менее, это решение предлагает сам Facebook.

Answer 3

[Никита Гущин]

this.setState({ dob: { year: '1980' }});

Comments

[Андрей Антропов]

К сожалению, реакт из коробки не мержит вглубь, просто заменит объект

[Никита Гущин]

Андрей Антропов: и правда ... виноват :(

Answer 4

[Александр]

Можно ещё так:

this.state.dob.year = 1980;
this.setState(this.state);
// или так 
this.setState(function(state) {
    state.dob.year = 1980;
    return state;
});

Comments

[Никита Гущин]

Вы мутируете state. Это плохо.

[Александр]

Никита Гущин: Мутирование с числом ничего плохого не принесёт.

[Никита Гущин]

OneFive:

shouldComponentUpdate(nextProps, nextState) {
  return !shallowequal(this.state, nextState);
}

Что будет в Вашем случае (первые две строчки Вашего ответа) и что будет в случае Андрей Антропов ?

[Андрей Антропов]

OneFive: У измененного стейта должна быть другая ссылка иначе будет много боли

[Александр]

Никита Гущин: Учитывая что shouldComponentUpdate задается в ручную, по прежнему не вижу проблемы, объясните пожалуйста чем это плохо?

[Никита Гущин]

OneFive: аналогичная реализация shouldComponentUpdate есть в PureComponent. Если отойти от state - аналоги shallowequal используются повсеместно с реактом (в редаксе и т.д.).
А проблема в том, что в приведенном примере shallowequal будет всегда возвращать true: так как она пробегает по свойствам и сравнивает их --> state.dob === nextState.dob --> true. Но это банальный случай. Может оказаться так, что Вы мутируете число в одном месте, а проблема вылезет совершенно в другом ... и тогда, как сказал Андрей Антропов у вас будет очень много боли.