Bir React durumunu mutasyona uğratmanın tercih edilen yolu nedir?

Diyelim ki içimde bir this.state.listçocuk listesi oluşturmak için kullanabileceğim düz nesnelerin bir listesi var. O halde içine nesne eklemenin doğru yolu nedir this.state.list?

Aşağıda, işe yarayacağını düşündüğüm tek yol, çünkü this.statebelgede belirtildiği gibi doğrudan mutasyona uğrayamazsınız.

this._list.push(newObject):
this.setState({list: this._list});

Bu bana çirkin görünüyor. Daha iyi bir yol var mı?

concat yeni bir dizi döndürür, böylece yapabilirsiniz

this.setState({list: this.state.list.concat([newObject])});

başka bir alternatif, React'in değişmezlik yardımcısıdır

  var newState = React.addons.update(this.state, {
      list : {
        $push : [newObject]
      }
  });

  this.setState(newState);

setState () , parametre olarak bir işlevle çağrılabilir:

this.setState((state) => ({ list: state.list.concat(newObj) }))

veya ES5'te:

this.setState(function(state) {
  return {
   list: state.list.concat(newObj)
  }
})

2016 Güncellemesi

ES6 ile şunları kullanabilirsiniz:

this.setState({ list: [...this.state.list, ...newObject] });

React belgelerinden ( https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous ):

This.props ve this.state eşzamansız olarak güncellenebileceğinden, sonraki durumu hesaplarken değerlerine güvenmemelisiniz.

Yani bunun yerine şunu yapmalısın:

this.setState((prevState) => ({
  contacts: prevState.contacts.concat([contact])
}));