Какой предпочтительный способ изменить состояние React?

Question

Какой предпочтительный способ изменить состояние React?

86

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

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

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

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

Khoi 31 май 2014, в 05:48

Источник

0

возможный дубликат корректной модификации массивов состояний в ReactJS , запрашивающий слияние
FakeRainBrigand 22 окт. 2014, в 12:40
0

Все эти ответы о добавлении элемента в массив. Но как насчет удаления элемента из него? Или просто полностью сбросить массив на новый?
Augustin Riedinger 19 фев. 2016, в 17:16

Теги:

javascript

reactjs

4 ответа

39

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

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

или в ES5:

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

Nyalab 10 апр. 2015, в 15:10

0

Интересно, реагирует ли на рендеринг только добавленный элемент или весь массив?
Arian Hosseinzadeh 29 авг. 2015, в 23:50
2

@Arian: React выполнит необходимые инструкции по мутации DOM, необходимые для визуализации только новых добавленных элементов. Конечно, учитывая, что вы недавно добавили элементы, не измените способ отображения предыдущих элементов.
Jose Browne 05 окт. 2015, в 06:17
1

Это фантастический ответ, и он чувствует себя намного чище, чем конкатенация массива только для того, чтобы выполнить толчок, хотя это мнение, я думаю.
Matt Styles 13 окт. 2015, в 08:46
2

@Nyalab, разве вы не должны заключать тело функции в круглые скобки? Как вы видите в вашем примере, фигурные скобки после жирной стрелки будут начинать блок, а не объект. Примерно так: this.setState((state) => ({ list: state.list.push(newObj) }))
kumar_harsh 02 нояб. 2015, в 07:02
0

Я считаю , что это до сих пор мутирует this.state . В документах, в частности, упоминается, что эта ссылка на состояние предоставляется для того, чтобы можно было ознакомиться с его значением, и их пример не изменяет значение.
Shawn Erquhart 02 янв. 2016, в 18:17
0

@kumar_harsh Я был склонен согласиться с идеей, что она должна быть заключена в скобки, но это не с ошибкой: Uncaught TypeError: this.props.friends.map is not a function . Это прекрасно работает без них.
Henry Marshall 20 янв. 2016, в 16:59
3

Как работает этот код? метод push вернет NUMBER , который будет установлен в переменной list
kumar_harsh 21 янв. 2016, в 06:42
0

@kumar_harsh Я думаю, что обе проблемы, о которых вы упомянули, являются хорошими замечаниями - я только что отредактировал ответ Ньялаба, чтобы исправить их, но вы можете свободно настраивать их самостоятельно, если считаете, что я ошибся.
JKillian 19 фев. 2016, в 16:59
1

Вы также можете использовать знак this.setState((state) => ({ list: [...state.list, newObj] })) : this.setState((state) => ({ list: [...state.list, newObj] }))
amoebe 26 окт. 2016, в 20:26

Показать ещё 7 комментариев

14

Обновление 2016

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

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

Ashish Chaudhary 16 авг. 2016, в 02:21

4

...[newObject] - это то же самое, что и newObject .
amoebe 26 окт. 2016, в 20:24
1

Это не будет работать для пакетных обновлений. Смотрите мой пример на stackoverflow.com/a/41445812/1998186 .
NealeU 03 янв. 2017, в 15:00

6

Из интерактивных документов (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])
}));

jcgzzc 10 янв. 2017, в 22:22

Ещё вопросы

возможный дубликат корректной модификации массивов состояний в ReactJS , запрашивающий слияние
Все эти ответы о добавлении элемента в массив. Но как насчет удаления элемента из него? Или просто полностью сбросить массив на новый?
Интересно, реагирует ли на рендеринг только добавленный элемент или весь массив?
@Arian: React выполнит необходимые инструкции по мутации DOM, необходимые для визуализации только новых добавленных элементов. Конечно, учитывая, что вы недавно добавили элементы, не измените способ отображения предыдущих элементов.
Это фантастический ответ, и он чувствует себя намного чище, чем конкатенация массива только для того, чтобы выполнить толчок, хотя это мнение, я думаю.
@Nyalab, разве вы не должны заключать тело функции в круглые скобки? Как вы видите в вашем примере, фигурные скобки после жирной стрелки будут начинать блок, а не объект. Примерно так: this.setState((state) => ({ list: state.list.push(newObj) }))
Я считаю , что это до сих пор мутирует this.state . В документах, в частности, упоминается, что эта ссылка на состояние предоставляется для того, чтобы можно было ознакомиться с его значением, и их пример не изменяет значение.
@kumar_harsh Я был склонен согласиться с идеей, что она должна быть заключена в скобки, но это не с ошибкой: Uncaught TypeError: this.props.friends.map is not a function . Это прекрасно работает без них.
Как работает этот код? метод push вернет NUMBER , который будет установлен в переменной list
@kumar_harsh Я думаю, что обе проблемы, о которых вы упомянули, являются хорошими замечаниями - я только что отредактировал ответ Ньялаба, чтобы исправить их, но вы можете свободно настраивать их самостоятельно, если считаете, что я ошибся.
Вы также можете использовать знак this.setState((state) => ({ list: [...state.list, newObj] })) : this.setState((state) => ({ list: [...state.list, newObj] }))
...[newObject] - это то же самое, что и newObject .
Это не будет работать для пакетных обновлений. Смотрите мой пример на stackoverflow.com/a/41445812/1998186 .

Heap · Accepted Answer · 2014-05-31T08-53-00.000Z

148

Лучший ответ

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

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

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

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

  this.setState(newState);

Heap 31 май 2014, в 08:53

6

concat принимает массив, поэтому вам понадобится this.state.list.concat([newObject]) .
Sophie Alpert 31 май 2014, в 07:57
0

@BenAlpert работает на меня в Chrome, вы говорите, что это нестандартное поведение?
Heap 31 май 2014, в 08:38
5

@Heap Хорошо, если вы передадите не-массив для concat он обернет его в массив, но лучше добавить массив в явном виде: если у вас есть [[1,2], [3,4]] и хотите добавить [5,6] в качестве следующего элемента, вам нужно сделать .concat([[5,6]]) иначе вы получите [[1,2], [3,4], 5, 6] .
Sophie Alpert 31 май 2014, в 21:00
1

Как бы я ни был признателен за идею, стоящую за помощниками неизменяемости (и в любом случае могу использовать ее), Array.concat наверняка превосходит добавление другой библиотеки.
Shawn Erquhart 02 янв. 2016, в 18:25
0

Используя кнопку concat for load more, я получил то, что мне нужно, в моем приложении реагирования, но в консоли у меня есть несколько ошибок: «Предупреждение: flattenChildren (...): Обнаружены два ребенка с одним и тем же ключом»
Hamza MHIRA 18 окт. 2016, в 13:47
0

При вызове this.setState со значением, полученным из this.state, вы столкнетесь с проблемами пакетной обработки обновлений. См. Stackoverflow.com/a/41445812/1998186, который ссылается на jsfiddle, показывая проблему, которую вы получите.
NealeU 03 янв. 2017, в 14:59
0

Конкат не будет работать
angry kiwi 07 март 2017, в 07:59

Показать ещё 5 комментариев