#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
страницу, правильно? Как бы я это сделал?