componentWillUpdate() работает не так, как хотелось бы

#javascript #reactjs #react-component #react-class-based-component

Вопрос:

У меня есть компонент класса, называемый 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».

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

1. что такое this.state.marObjectList ? это опечатка, и вы имели в виду this.state.objectList ?

2. Какой реквизит у вас есть Object ? Обеспечивает ли это какой onDelete -то обратный вызов?

3. @Георгий Да, исправлено.

4. самый простой способ проверить наличие массива length : if( this.state.objectList.length !== previous.objectList.length) { this.getObjectList(); } . Также вы можете использовать onDelete обратный вызов, как упоминал @BANOnotIT, и не использовать componentDidUpdate

5. @BANOnotIT Я отредактировал вопрос, чтобы включить реквизит. Я не предоставил обратный onDelete вызов . Я не уверен, как это работает. Мне нужна еще одна функция внутри onDelete , которая перенаправляла бы родительскую ListOfItems.js страницу, правильно? Как бы я это сделал?