butteff
@butteff
Раз в тысячу лет заправляю свитер в носки

Как правильно и красиво обновлять states для вложенных объектов в React?

Вот, к римеру, есть такой state:
this.state = {
   parent : { 
       someChild: {
           oneMoreChild: { name: 'Test', another: 'Test2'  }
       }
   }
}


Но активно на странице меняется только малая часть всего этого, остальное не используется.
И, предположим, меняются тоже только эти значения (допустим, вместо 'Test2', мне надо вписать 'Test3')

Можно, как я думаю, делать два варианта:
1. мне надо взять const {parent} = this.state; перебирать через map() или некие иные циклы это все, записать новое значение и сохранить в this.setState();
2. Вынести в state на первый уровень вложенности новую сущность, которая и будет использоваться, ну и работать с ней без всяких циклов, примерно так:

constructor(props) {
    super(props)
    const toState =  {
       parent : { 
           someChild: {
               oneMoreChild: { name: 'Test', another: 'Test2'  }
           }
       }
    }

    const { parent } = toState;
    const {someChild} = parent;
    const {oneMoreChild} = someChild;
    const {name, another} = oneMoreChild;

    this.state = {
       toState,
       name: name,
       another: another,
    }
}


И везде после делать set.State({ another: 'Test3'}).

Оба эти способа мне кажутся неправильными. Потому как может быть слишком глубокая вложенность.
Но структура данных в проекте, сделанным не мной, идет именно такая (через props передается куча данных, вложенных, но используется только часть из них). Все переделывать полностью, понятно, не выход, надо работать с тем, что есть. Плюс React для меня новая технология. И Как тут делать правильно и красиво?

В общем, есть ли способ более правильный и красивый, когда для объекта с высокой степенью вложенности, нужно вписать одно значение где-то глубоко в стэйтс? (допустим, вместо 'Test2', мне надо вписать 'Test3' у parent)
  • Вопрос задан
  • 535 просмотров
Пригласить эксперта
Ответы на вопрос 2
miraage
@miraage
Старый прогер
immutability-helper (каким бы громоздким не казался, задачу свою решает)

Ramda (lensProp/lensPath + set/over)

immer
Ответ написан
Комментировать
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. map - метод для преобразования данных, а не для перебора.
2. Если изменяемые только два свойства, то не ясно зачем вам вообще иметь сложную вложенную структуру и держать ее в state.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы