Мелкое слияние, setState и оператор распространения

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

state =  {
     fruit: “apple”,
     bird: { 
             short: "hummingbird", 
             tall: "ostrich" 
     }
}

setState уничтожит все в Bird, если вы сделаете следующее

this.setState({ bird, { tall: “Emu” } })

setState не перейдет на второй уровень объекта, чтобы просто заменить «страус» на «эму». Он воссоздает новую птицу, содержащую только «высокий». Замечательно а!

Теперь состояние будет выглядеть так

state =  {
     fruit: “apple”,
     bird: { 
             tall: "emu" 
      }
}

Чтобы предотвратить такое поведение, вам нужно использовать вторую форму setState(), которая принимает функцию, а не объект. Эта функция получит предыдущее состояние в качестве первого аргумента, а реквизиты во время применения обновления в качестве второго аргумента:

this.setState((prevState, currentProps) => ({
    bird : {...prevState, tall: "emu" }
)});

Так что это будет иметь желаемый эффект. Вот как будет выглядеть состояние

state =  {
    fruit: “apple”,
    bird: { 
             short: "hummingbird", 
             tall: "emu" 
     }
}

Еще одна вещь, о которой следует помнить, если вы этого не сделаете, это то, как работает оператор распространения,

var obj = {a:1, b:2};
var before = {
      a: 3,
      …obj
};
var after = {
     …obj,
     a:3
};
console.log(‘before’, before); // {a:1, b:2}
console.log(‘after’, after); // {a:3, b:2}
https://jsfiddle.net/eitanp461/6osws8cq/

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