Что является предпочтительным способом для изменения состояния реакции?

Скажем, у меня есть список простых объектов в моем this.state.list, который затем я могу использовать для отображения списка детей. Каков тогда правильный способ вставить объект в this.state.list?

Ниже приведен единственный способ, по которому он будет работать, потому что вы не можете напрямую мутировать this.state, как указано в документе.

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

Это кажется мне уродливым. Есть ли лучший способ?

Ответ 1

concat возвращает новый массив, поэтому вы можете сделать

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

другой альтернативой является React помощник по неизменности

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

  this.setState(newState);

Ответ 2

setState() можно вызвать с помощью функции в качестве параметра:

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

или в ES5:

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

Ответ 3

Обновление 2016

С ES6 вы можете использовать:

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

Ответ 4

Из интерактивных документов (https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous):

Поскольку this.props и this.state могут обновляться асинхронно, вы не должны полагаться на их значения для вычисления следующего состояния.

Итак, вы должны сделать это вместо:

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