Блог

У меня есть компонент класса, называемый ListOfItems.js, в котором перечислена куча объектов, подобных этому (кстати, я должен использовать компоненты класса, а не компоненты функций):

 class ListOfItems extends Component {
  construction (props) {
    super(props);
    this.state = {
      objectList: []
    }
  }
}

// This gets the list of objects to display
componentDidMount() {
   this.getObjectList();
}

componentDidUpdate() {
  //not sure what to put for "previous ObjectList"
  if( this.state.ObjectList !== previous ObjectList) {
     this.getObjectList();
  }
}
 

Внутри Object.js (файл для каждого объекта, отображаемого в ListOfItems), у меня есть функция удаления, в которой, если пользователь выбрал значок «x» на объекте, этот объект удаляется из списка. Пример того, как Object.js внутри ListOfItems.js выглядит так:

 // BTW, I cannot change anything here. I have simplified
// my code very heavily for this purposes of this question.
{this.state.objectList.map(item) => {
  <Object 
    objectList={this.objectList}
    data={item}
    //few other props here
  >
}
 

Я вижу, что объект удаляется сразу после того, как я нажму «x», в соответствии с ответом на извлечение api, который я зарегистрировал в консоли. И когда я обновляю страницу вручную, объект удаляется из отображаемого списка.

ЦЕЛЬ: Я хочу, чтобы удаление происходило в режиме реального времени, сразу после того, как пользователь нажмет «x».