Я пытаюсь установить состояние внутри массива объектов внутри другого массива объектов. Я много чего пробовал, но не могу найти подходящего решения.
Вот мой массив:
this.state = {
Pages: [
{
image: undefined,
audio: undefined,
audioName: undefined,
subtitles: 'up',
Langs: [
{
lang: 'fr_FR',
text: '',
}
]
}
]
};
Я хочу изменить значение this.state.Pages [i] .Langs [y] .lang или .text. У кого-то есть идея?
С помощью функции setState. Тогда как установить непосредственно один объект Langs в моем массиве?
неужели так ?? только один уровень вложен
Немного сложно. Получите из массива страниц тот, который вам нужно изменить, и его индекс. Затем используйте array.map()
в массиве Langs
и в этом обратном вызове используйте условную логику, чтобы либо вернуть тот же языковой объект, либо измененный объект с новым текстовым значением. Наконец, добавьте создать новый массив страниц и замените предыдущий элемент новым (созданным с помощью array.map
), используя индекс, который вы сохранили ранее.
Вы можете создать копию массивов Pages
и Pages[i].Langs
, а также создать копию объекта Pages[i].Langs[y]
и перезаписать свойство lang
или text
.
Пример
changeText = (i, y, text) => {
this.setState(previousState => {
const Pages = [...previousState.Pages];
const Langs = [...Pages[i].Langs];
Langs[y] = { ...Langs[y], text };
Pages[i] = { ...Pages[i], Langs };
return { Pages };
});
};
@Tholle это похоже на то, что setState не работает для нескольких вложенных объектов?
@ShubhamAgarwalBhewanewala Это работает, но чем более вложено состояние, тем сложнее его исправить.
На этом уровне вложенности я предлагаю вам использовать библиотеку погружать:
import produce from "immer"
this.setState((oldState) => {
return produce(oldState, draftState => {
draftState.Pages.Langs.push({ lang: 'it_IT', text: 'foo' })
})
})
Сила иммера в том, что вы можете изменять черновик по своему усмотрению, не касаясь старого состояния.
Как вы устанавливаете свое состояние? Внутри конструктора (или чего-то еще, когда компонент создается) или функции вроде
setState
? Обратите внимание, что функцияsetState
работает на одном уровне вложенных объектов.