@ivan_ivanov_ivanych

Как обновить вложенный массив в React?

Доброго времени суток!
Мне нужно изменить состояние вложенного в массив элемента, а именно questions_count:
this.state = {
      data: [],
      isLoaded: false,
      content: {
        exams:[],
        subjects: [],
        numbers: [],
        themes: [
          {
            id: 16, 
            questions_count: 8, 
            title: "Квадратные ура…"
          },
          {
            id: 14, 
            questions_count: 2, 
            title: "Арифметическая…"
          },
          {
            id: 15, 
            questions_count: 2, 
            title: "Геометрическая…"
          }
        ]
   }

Такой способ выдает ошибку компиляции:
this.setState({
    content.themes[i].questions_count: content.themes[i].questions_count++
 })

Так же пробовал такой способ, но он тоже выдает ошибку не читает с квадратными скобками внутри setState:
this.setState({
  ...this.state, content: {
      ...this.state.content, themes[i]: {
              ...this.state.content.themes[i], questions_count: questions_count++
              }
       }
 })
  • Вопрос задан
  • 59 просмотров
Решения вопроса 1
@hello_my_name_is_dany
Backend Developer (Node.js, PHP, C#)
К сожалению, вам придётся полностью копировать объект content c новыми данными в массиве.

const newContent = { ...this.state.content };
newContent.themes[0].questions_count++;
this.setState({ content: newContent });

Ещё можно разделить всё по компонентам, так проще будет контролировать state и, например, через события (callbacks в props) где-то собирать, если надо. А тут уже как вариант можно использовать Redux и оттуда отдельно тянуть массив с вопросами.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
не нужно держать такой сложный объект в стейте, разбейте его на объекты с одним уровнем вложености
Ответ написан
Познакомтесь с lodash и некоторые задачи сильно упростятся https://lodash.com/docs/4.17.15#set
P.S. имейте в виду, метод мутирует объект, поэтому перед мутацией его лучше скопировать.
А вообще для обновления глубоко вложенных данных лучше подойдет https://github.com/immerjs/immer
Ответ написан
Ваш ответ на вопрос

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

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