setState удаляет элементы из массива, используя фильтр, но удаленный элемент остается в состоянии в виде пустой строки - PullRequest
Новая
       9

setState удаляет элементы из массива, используя фильтр, но удаленный элемент остается в состоянии в виде пустой строки

0 голосов
/ 20 февраля 2020

В состоянии компонента у меня есть массив элементов todo, полученных из MongoDB через топор ios. Список в массиве отображается с помощью метода map в несортированный список (в данном случае <i> это просто значок): 

<ul>
  {this.state.items.map(e => (
    <li key={e._id}>
      {e.name}
      <i onClick={() => this.removeItem(e._id)}
      ></i>
    </li>
  ))}
</ul>

Затем мне нужно удалить элемент с помощью onClick. Я удаляю элемент, используя ax ios из БД, а затем фильтрую элемент из массива в состоянии по идентификатору: 

removeItem = e => {
  axios
    .delete(`${process.env.REACT_APP_API_URL}/items/${e}`)
    .then(res => {
      let newItems = this.state.items;
      newItems.filter(item => item._id !== res.data._id);
      this.setState({ items: newItems });
    })
    .catch(err => console.log(err));
}

, когда я нажимаю на значок в нем, удаляет элемент из массив. Однако элемент <li> этого элемента остается в DOM со значением blan c. При проверке состояния я заметил, что после удаления элемента массива состояние имеет пустую строку вместо этого элемента (который, как я полагаю, затем отображается, но без значения.

Снимок экрана инспектора

После обновления страницы sh она полностью исчезла. Похоже, setState не отображает DOM в моем случае, и я не могу понять, почему.

1 Ответ

1 голос
/ 20 февраля 2020

Метод фильтра возвращает новый массив, чтобы избежать побочных эффектов, я бы написал его так: 

...
.then(res => {
   const newItems = this.state.items.filter(item => item._id !== res.data._id)

   this.setState({ items: newItems });
 })
...

И чтобы быть уверенным, что state является ссылкой на состояние компонента во время изменения применяется (так как запрос API может занять некоторое время), я предлагаю: 

...
.then(res => {
   this.setState(state => {
      return {
         items: state.items.filter(item => item._id !== res.data._id)
       }
   ))
 })
...

Я не уверен на 100%, что это проблема, было бы неплохо иметь рабочий фрагмент, но вы можете попробуй.

...