Как установить setState для вложенного массива?

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

getInitialState() {
  return {
    invalid: true,
    access: {
      access_code: '',
      zipcode: '',
      password: '',
      confirm: '',
      hospital_id: '',
    },
  }
},

Как установить состояние hospital_id без установки остального доступа?

Это, кажется, удаляет все, кроме hospital_id:

this.setState({access: {hospital_id: 1}})

Ответ 1

Вы можете использовать Object.assign или предложение распространения объектов для создания копий объектов с обновленными свойствами.

this.setState({
  access: {
    ...this.state.access,
    hospital_id: 1,
  },
});

this.setState({
  access: Object.assign({}, this.state.access, {
    hospital_id: 1,
  }),
});

Или для кратчайшей версии и атомного обновления:

this.setState(({access}) => ({access: {
  ...access,
  hospital_id: 1,
}});

И еще один вариант - это аддон обновлений:

var update = require('react-addons-update');
this.setState({
  access: update(this.state.access, {
    hospital_id: {$set: 1},
  })
});

Я бы использовал первый.

Ответ 2

let newAccess = Object.assign({}, this.state.access);
newAccess.hospital_id = 1;
this.setState({access: newAccess});

Ответ 3

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

Однако не так много удаляет все, кроме hospital_id, оно заменяет его. Установка состояния должна содержать полное состояние.

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

this.setState({
  invalid: state.invalid,
  access: {
    access_code: state.access.access_code,
    zipcode: state.access.zipcode,
    password: state.access.password,
    confirm: state.access.confirm,
    hospital_id: 1,
  }
});

Ответ 4

Мой предпочтительный способ сделать это сейчас так же просто, как:

let newAccess = this.state.access;
newAccess.hospital_id = 1;
setState({access: newAccess});

Чуть проще, чем текущий принятый ответ.

EDIT (на основе вопроса от @SILENT)

Похоже, что это действительно потенциально опасный метод. Дальнейшее чтение здесь Реакция: (очень короткий) разговор о неизменности.

Похоже, лучший способ сделать это:

let newAccess = Object.assign({}, this.state.access, {hospital_id:1});
this.setState({access: newAccess});

Ответ 5

Другой способ сделать это:

const newAccess = {...this.state.access};
newAccess.hospital_id = 1;
setState({access: newAccess});

Использование оператора распространения создает клон this.state.access.