Старое состояние все еще существует даже после обновления состояния в реакции

Question

Реагировать приложение, содержащее динамический список У меня есть две операции

1.add

2.delete

Ведение списка в this.state.tasks, а также в БД

При рендеринге

{this.state.tasks.map(tile => (
     <GridListTile cols='1'>           
     <Task content={tile} saveData={this.updateData}/>             
     </GridListTile>           
))}              

Есть 4 объекта, которые отображаются в виде плиток, и теперь я удаляю 1-й объект, я обновляю в БД и выбираю свежий список из БД и назначаю егов состояние

Я получаю данные из базы данных

this.setState({tasks : data})

Поскольку состояние обновляется, вызывается функция рендеринга, количество объектов уменьшается до 3, но удаленный объект все еще существует

Функция удаления:

deleteData(val) {
  var apiHeader = {
    'taskid': val
  }
  fetch("/api/deleteTask", {
    method: 'GET',
    headers: apiHeader
  })
  .then(res => this.getAvailableTasks()) 
}


getAvailableTasks() {
    fetch("/api/getTasks", {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
   },
    }).then(res => res.json())    // in response i am getting 3 only and also 3 documents are showing in db also
    .then(data => this.setState({tasks : data}));       
}

Answer 1

Решено, поддерживая другое начальное состояние

this.baseState = this.state;

Перед обновлением объекта состояния назначьте начальное состояние, а затем обновите объект

this.setState(this.baseState);
this.setState({tasks : data});

Answer 2

То, как вы объявляете функции, заставит их не распознавать текущий контекст как this.Вы можете попробовать:

  deleteData =() => {
   // code
}
 getAvailableTasks = () => {
       // your code here
  }