与 jquery 数据表反应 - NotFoundError: Node.removeChild: 要删除的节点不是该节点的子节点答案

【问题标题】：react with jquery datatables - NotFoundError: Node.removeChild: The node to be removed is not a child of this node与 jquery 数据表反应 - NotFoundError: Node.removeChild: 要删除的节点不是该节点的子节点
【发布时间】：2020-08-20 18:36:27
【问题描述】：

我正在尝试在反应应用程序中使用 jquery 数据表。我知道 jquery 和 react 不能一起玩。我对 jquery 数据表非常满意，并且无法找到任何可比较的反应数据表组件。我能够让表格显示数据：

当我点击编辑链接时出现错误（在阅读中圈出）。

这是 ComponentDidMount：

componentDidMount() {
    var _ = this;
    this.$el = $(this.el);
    this.$el.DataTable(
        {
            processing: true,
            paging: true,
            sPaginationType: "full",
            filter: true,
            destroy: true,
            serverSide: true,
            info: true,
            ajax: {
                url: this.state.endpoint,
                type: "POST",
                contentType: 'application/json',
                data: function (d) {
                    return JSON.stringify(d);
                },
            },
            bAutoWidth: false,
            columns: [
                { title: "Actions", orderable: false },
                { title: "Id", orderable: true },
                { title: "Name", orderable: true },
                { title: "User Name", orderable: true },
                { title: "Created", orderable: true },
            ]
        })


    $('#tblAccounts').on("click", "#btnEdit", function (e) {
        e.preventDefault();
        var id = $(this).attr('data-user-id');
        _.setState({ userId: id, showEditUserModal: true });            
    })
}

当点击编辑按钮时，它会点击以下代码：

$('#tblAccounts').on("click", "#btnEdit", function (e) {
        e.preventDefault();
        var id = $(this).attr('data-user-id');
        _.setState({ userId: id, showEditUserModal: true });            
    })

但是当它到达时：

_.setState({ userId: id, showEditUserModal: true });

我收到此错误： NotFoundError: Node.removeChild: 要移除的节点不是该节点的子节点

目标是设置这些属性的状态，然后在渲染时显示编辑模式。

我不确定是什么导致了这个错误，但我猜它可能是 jquery 的 DOM 操作。

有什么方法可以在这个 jquery 函数中设置状态？

或者，是否有内置排序、过滤/搜索和分页功能的现有数据表，可以处理大约 100,000 条记录

【问题讨论】：

我正在尝试 react-bootstrap-table-next ，到目前为止它很适合这项工作。我唯一担心的是有许多记录的表现。

标签： jquery reactjs

【解决方案1】：

使用 react-bootstrap-table-next

【讨论】：