反应无法在“节点”上执行“ removeChild”

时间:2019-05-06 06:42:28

标签: javascript reactjs dom

我有孩子和父母的组成部分:

父母:

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的新手。

0 个答案:

没有答案