Вот, к римеру, есть такой 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)
