Не удается обновить состояние в React.js

Я использую React с ES2015. У меня это в моем штате:

this.state = { info: {
            merchandise: {
              label: '',
              visible: false
            },
            hotels: {
              label: '',
              visible: false
            }
    }
}

Я пытаюсь обновить состояние с помощью этого кода:

this.setState({info.merchandise.label: "New Label"})

но я получаю ошибку, тогда как я могу регистрировать значение this.state.info.merchandise.labelбез каких-либо проблем. Что я делаю не так?

3 ответа

  1. Я считаю, что вы можете использовать только setState()на прямой собственности this.state.

    Что вы могли бы сделать в этой ситуации

    1. Сделайте неглубокую копию stateсвойства, с которым вы хотите работать
    2. Измените свойство, которое необходимо изменить в копии.
    3. Копия теперь имеет обновленные свойства, которые вы хотели. Поэтому назначьте его обратно this.state

    Вот так:

    let temp = Object.assign({}, this.state.info);
    temp.merchandise.label = "New Label";
    this.setState(info: temp);
    
  2. Согласно react’s setState doc:

    Выполняет неглубокое слияние nextState в текущее состояние

    Это означает, что необходимо предоставить допустимый nextStateобъект в качестве аргумента метода. {info.merchandise.label: "New Label"}не является синтаксически правильным, поэтому вы получаете ошибку.

    Относиться к этому.состояние как бы неизменное.

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

    В вашем случае объект state содержит несколько вложенных объектов. Если вы хотите изменить свойство «листового» объекта, Вам также придется предоставить новые объекты для каждого содержащего объекта в дереве (поскольку каждый из них имеет свойство, которое изменяется в процессе). Использование Объекта.assign() для создания новых объектов можно написать:

    // new "leaf" object:
    const newMerchandise = Object.assign({}, this.state.info.merchandise,
        {label: "New Label"});
    
    // new "parent" object:
    const newInfo = Object.assign({}, this.state.info,
        {merchandise: newMerchandise});
    
    // new state ("parent") object:
    const newState = Object.assign({}, this.state,
        {info: newInfo});
    
    // eventually:
    this.setState(newState);
    

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