Блог

Главная - Вопросы по программированию - Как обновить вложенный массив в состоянии реакции?

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

#javascript #reactjs #state

#javascript #reactjs #состояние

Вопрос:

Я пытаюсь обновить свое состояние, чтобы вложенный массив был очищен, но остальная часть состояния осталась прежней.

Мой объект состояния выглядит так:

 this.state = {
    data: {
        type: "FeatureCollection",
        features: [1,2,3,4]
    }
}

И я ближе всего к работе:

 this.setState(prevState => ({
    data: [...prevState.data, (this.state.data.features.length = 0)]
}));

Предупреждение консоли, которое я получаю при таком подходе:

 Do not mutate state directly. Use setState()  react/no-direct-mutation-state

Но как еще это возможно?

Большое спасибо 🙂

Комментарии:

1. что вы пытаетесь обновить? Вы делаете массив пустым?

2. @WillJenkins Откуда ты знаешь, что этого нет в конструкторе? Я думаю, что это внутренняя часть setState .

3. @BrianThompson — он говорит вам «Использовать setState ()», что вы и делаете

4. Но есть также прямое назначение this.state.xx , которое, скорее всего, является проблемой.

5. @UKS Да, я просто хочу сделать массив пустым

Ответ №1:

Первая проблема, которую я вижу в вашем коде, заключается в том, что вы переходите data от объекта к массиву. Так что это должно быть как минимум

 this.setState(prevState => ({
  data: {...prevState.data, (this.state.data.features.length = 0)}
}));

Тогда вы все еще изменяете состояние, делая this.state.data.features.length = 0 это, поэтому, чтобы исправить это, вам нужно постоянно обновлять этот массив:

 this.setState(prevState => ({
  data: {
    ...prevState.data, 
    features: [] // Or whatever you need your new array to be
  }
}));

Итак, скажем, вы хотели добавить еще один элемент в конец, вы могли бы сделать:

 this.setState(prevState => ({
  data: {
    ...prevState.data, 
    features: [...prevState.data.features, 5]
  }
}));

Ответ №2:

Вы должны обновить состояние следующим образом. data в состоянии находится объект, а не массив.

 this.setState(prevState => ({
    data: {...prevState.data, features: [] }
}));