我有孩子和父母的组成部分:
父母:
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>
);
}
}
因此,子组件-这是一个模态窗口,我从父组件中调用事件。
在父事件中,我应该过滤一组客户并删除项目,然后更新父状态并在循环中重新呈现此数组。但是,当我尝试这样做时,控制台出现错误:未捕获的DOMException:无法在“节点”上执行“ removeChild”:要删除的节点不是该节点的子节点。
我的错误在哪里? 附言我是React的新手。