У меня есть дочерний и родительский компоненты:
Родитель:
class CustomerTable extends Component {
constructor(props) {
super(props);
this.state = {
customers: [],
deletedItemId: ''
}
deleteItemHandler = () => {
axios.delete(`/internal/api/Customer/${this.state.deletedItemId}`, {
headers: {
'Content-Type': 'application/json'
}
}).then(resp => {
var array = [...this.state.customers];
array = array.filter(function (item) {
return item.Id !== resp.data;
});
this.setState({ customers: array });
}).catch(error => {
});
}
}
render () {
return (
<ul>
{
this.state.customers.map((item, key) => {
return (
<li className="d-flex item-default" key={key}>
<CustomerTableRow
customer={item}/>
</li>);
})
}
</ul>
<DeleteCustomerModal
deleteItem={this.deleteItemHandler}/>
);
}
}
Ребенок:
class DeleteCustomerModal extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<input onClick={this.props.deleteItem}/>
</div>
);
}
}
Итак, дочерний компонент - это модальное окно, где я вызываю событие из родительского компонента.
В родительском событии я должен отфильтровать массив клиентов и удалить элемент, а затем обновить состояние родителя и повторно обработать этот массив в цикле. Но когда я пытаюсь это сделать, у меня появляется ошибка в консоли: Uncaught DOMException: не удалось выполнить «removeChild» на «Node»: удаляемый узел не является дочерним для этого узла.
Где моя ошибка?
Постскриптум Я новичок в React.