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

Question

[ivan_ivanov_ivanych]

Доброго времени суток!
Мне нужно изменить состояние вложенного в массив элемента, а именно 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++
              }
       }
 })

Answer 1

[Daniil Vasilyev]

К сожалению, вам придётся полностью копировать объект content c новыми данными в массиве.

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

Ещё можно разделить всё по компонентам, так проще будет контролировать state и, например, через события (callbacks в props) где-то собирать, если надо. А тут уже как вариант можно использовать Redux и оттуда отдельно тянуть массив с вопросами.

Comments

[ivan_ivanov_ivanych]

Спасибо! Мне это очень помогло)

[Владимир]

не делайте так, в вашем примере вы мутируете themes[0] и в старом стейте
разбейте стейт на одноуровневые объекты

Answer 2

[Владимир]

не нужно держать такой сложный объект в стейте, разбейте его на объекты с одним уровнем вложености