Как установить состояние массива объектов внутри массива объектов в React

Я пытаюсь установить состояние внутри массива объектов внутри другого массива объектов. Я много чего пробовал, но не могу найти подходящего решения.

Вот мой массив:

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? Обратите внимание, что функция setState работает на одном уровне вложенных объектов.

Hennek 02.08.2018 16:45

С помощью функции setState. Тогда как установить непосредственно один объект Langs в моем массиве?

tinmarfrutos 02.08.2018 16:49

неужели так ?? только один уровень вложен

Shubham Agarwal Bhewanewala 02.08.2018 16:49

Немного сложно. Получите из массива страниц тот, который вам нужно изменить, и его индекс. Затем используйте array.map() в массиве Langs и в этом обратном вызове используйте условную логику, чтобы либо вернуть тот же языковой объект, либо измененный объект с новым текстовым значением. Наконец, добавьте создать новый массив страниц и замените предыдущий элемент новым (созданным с помощью array.map), используя индекс, который вы сохранили ранее.

Rodrigo 02.08.2018 16:54
Структурированный массив Numpy
Структурированный массив Numpy
Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...
T - 1Bits: Генерация последовательного массива
T - 1Bits: Генерация последовательного массива
По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...
Что такое деструктуризация массива в JavaScript?
Что такое деструктуризация массива в JavaScript?
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
1
4
1 108
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете создать копию массивов 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 не работает для нескольких вложенных объектов?

Shubham Agarwal Bhewanewala 02.08.2018 16:59

@ShubhamAgarwalBhewanewala Это работает, но чем более вложено состояние, тем сложнее его исправить.

Tholle 02.08.2018 17:00

На этом уровне вложенности я предлагаю вам использовать библиотеку погружать:

import produce from "immer"

this.setState((oldState) => {
  return produce(oldState, draftState => {
    draftState.Pages.Langs.push({ lang: 'it_IT', text: 'foo' })
  })
})

Сила иммера в том, что вы можете изменять черновик по своему усмотрению, не касаясь старого состояния.

Другие вопросы по теме