maksipes
@maksipes

Массивы объектов в state — как обновлять?

Дано:
В state массив, в массиве объекты.
Надо:
Обновить у одного из объектов, одно из свойств.

Умные люди научили меня не мутировать state и делать примерно так:

onItemHintClick = (index, e) => {
    const newItems = this.state.items.map((item, i) => {
      if (i === index) {
        return { ...item, htogle: !item.htogle };
      } else {
        return {...item};
      }
    });
    this.setState({ items: newItems });
  };


Т.е. в цикле собирается клон массива из массива в state, где меняется одно свойство, одного элемента.

Я только начинаю изучать React и JS и мне кажется странным - ради простой операции устраивать такую возню.

А если элементов в массиве много и они сами по себе большие?

Ведь есть прямой и изящный способ изменить нужное значение, сделать, например, так:

this.state.items[index].htogle = !this.state.items[index].htogle
this.forceUpdate();


А теперь прошу внимания - я знаю, что против такого способа выступает официальная документация, где сказано - не мутируй state и избегай forceUpdate(), это может привести к непрогнозируемым багагм.

Так я хочу спросить - ПОЧЕМУ так нельзя делать и КАКИЕ негативные последствия это может иметь?

Именно в данном случае, где не планируется использовать houldComponentUpdate() и другие продвинутые техники управления состоянием приложения.

Мне кажется, что в простых ситуациях, мутация state и немедленный вызов forceUpdate() будет работать не хуже setState, при этом код будет внятней и эффективней.

ПС. пожалуйста, не посылайте меня читать документацию, эти фразы про setState и forceUpdate() - я хочу понять, а не только слепо следовать.
  • Вопрос задан
  • 172 просмотра
Решения вопроса 2
@lnked
onItemHintClick = (index, e) =>
  this.setState(({ items }) => ({
    items: [
      ...items,
      [index]: {
        ...items[index],
        htogle: !items[index].htogle,
      },
    ],
  }));
Ответ написан
rockon404
@rockon404 Куратор тега React
Frontend Developer
Умные люди научили меня не мутировать state и делать примерно так

Как вы уже могли догадаться по ответам, это не самый оптимальный метод. Даже неправильный.
Так компоненты в свойствах которых не было никаких изменений будут перерисованы.

против такого способа выступает официальная документация, где сказано - не мутируй state и избегай forceUpdate(), это может привести к непрогнозируемым багагм.
Так я хочу спросить - ПОЧЕМУ так нельзя делать и КАКИЕ негативные последствия это может иметь?

Ну вы же сами пишите, что читали, что это может привести к непрогнозируемым багам.

Мне кажется, что в простых ситуациях, мутация state и немедленный вызов forceUpdate() будет работать не хуже setState, при этом код будет внятней и эффективней.

А как вы собираетесь контролировать эти простые ситуации?
Каждый раз внося изменения в код, вам придется изучать все древо, чтобы понять, что у вас обновляется мутированием, а что иммутабельно.
Код с винегретом из мутирования и иммутабельного обновления будет очень трудно поддерживать, а баги, скорей всего, будут вылезать в самых неожиданных местах.

Если вам нравится подход с мутациями, то вы можете попробовать использовать с React библиотеку MobX.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
от 150 000 до 250 000 руб.
Enapter Санкт-Петербург
от 180 000 до 240 000 руб.
22 авг. 2019, в 20:16
10000 руб./за проект
22 авг. 2019, в 18:53
30000 руб./за проект