Как добавить или удалить элемент из массива состояний в реакции

Question

У меня есть массив состояний, и когда пользователь нажимает на элемент, элемент должен быть добавлен в массив состояний.Я использую скрипт типа, интерфейс для модели данных.

Это код, который я использовал

this.setState(prevState => ({
  this.state.activeItemList: [...prevState.activeItemList, newItem]
}))

Интерфейс

interface IState {     activeItemList?: IItem[] | null;  }

Это правильный путь?

Answer 1

Это, конечно, a правильный путь, да, и я бы сказал, что сегодня это, вероятно, идиоматический путь. Вы делаете обе важные вещи:

1. Вы используете версию обратного вызова setState и
2. Вы создаете новый массив, а не модифицируете существующее состояние on.

Отлично!

Вы также можете использовать concat вместо распространения:

this.setState(prevState => ({
  this.state.activeItemList: prevState.activeItemList.concat(newItem)
}))

но, опять же, ваш путь, вероятно, является идиоматическим путем в современном мире. Кроме того, если бы newItem был массивом (например, activeItemList предназначался как массив массивов), concat расширил бы его, что не было бы хорошо.

Answer 2

Во-первых, вам нужно проверить, был ли массив нулевым или неопределенным, затем вы можете добавить новый элемент в существующий массив, в противном случае создайте массив с помощью newItem.

 this.setState((prevState) => ({
        ...prevState,
        activeItemList: prevState.activeItemList ? [...prevState.activeItemList, newItem] : [newItem],
    }));

Answer 3

На самом деле, я бы написал это как

this.setState(prevState => ({
  ...prevState,
  activeItemList: [...prevState.activeItemList, newItem]
}))

При текущем определении IState это означает то же самое, но если IState когда-либо изменится, я готовлюсь.Кроме того, в коде подчеркивается, что все, что он делает, это добавляет newItem и ничего не стирает.

Удаление я бы реализовал как:

this.setState(prevState => ({
  ...prevState,
  activeItemList: prevState.activeItemList.filter(item => item !== oldItem)
}))