jaki jest preferowany sposób mutowania stanu React?

Powiedzmy, że mam listę zwykłych obiektów this.state.list, których mogę następnie użyć do renderowania listy dzieci. Jaki jest zatem właściwy sposób wstawiania obiektu this.state.list?

Poniżej znajduje się jedyny sposób, w jaki myślę, że zadziała, ponieważ nie możesz this.statebezpośrednio mutować, jak wspomniano w dokumencie.

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

Wydaje mi się to brzydkie. Czy jest lepszy sposób?

concat zwraca nową tablicę, więc możesz to zrobić

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

inną alternatywą jest pomocnik niezmienności Reacta

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

  this.setState(newState);

setState () można wywołać z funkcją jako parametrem:

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

lub w ES5:

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

Aktualizacja 2016

Dzięki ES6 możesz użyć:

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

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

Ponieważ this.props i this.state mogą być aktualizowane asynchronicznie, nie należy polegać na ich wartościach przy obliczaniu następnego stanu.

Zamiast tego powinieneś to zrobić:

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