jquery - reactjs状态变化时如何正确更新jquery数据表内容？

Question

我正在尝试构建一个反应 js jquery 数据表可重用组件。

问题是：

状态更改后如何正确刷新数据表记录？

我试图直接从道具将数据分配给地图功能。这样，表格被渲染，但它与 jquery 数据表分离，使其无用。

所以我想在组件上使用一个单独的状态，它可以使用 props 从父组件接收它的值。

但它也不起作用。

我不断收到有关 componentDidUpdate 的浏览器警报，说明：

“DataTables 警告：table id=DataTables_Table_0 - 无法重新初始化 DataTable。有关此错误的更多信息，请参阅http://datatables.net/tn/3”

似乎我试图改变一些我不应该改变的东西。

我也不知道在 updatePlugin() 上进行的 jquery.datatables 方法调用是否正确。

有人可以帮忙吗？

我迷路了！

到目前为止，这是我的数据表组件：

import React, { Component } from 'react'
import Column from './dataTable.Column'
import Row from './dataTable.Row'

const $ = require('jquery')
$.DataTable = require('datatables.net')

export default class DataTable extends Component {
    
    state = {
        recordList: []
    }

    componentDidMount() {
        this.setupPlugin()
    }

    componentDidUpdate(){
        if(this.props.recordList.length != this.state.recordList){        
            this.setState({recordList: this.props.recordList})
            console.log(this.props.recordList)
            this.updatePlugin()
        }
    }        

    render(){
        return(
            <table 
                className="table table-bordered table-hover table-striped" 
                width="100%" 
                ref={el => this.el = el}>  
                <thead>
                    <tr>
                    {this.props.columnList.map(col => (
                        <Column
                            key={col.Caption}
                            caption={col.Caption}
                            alRight={col.alRight}
                        />
                        ))}    
                    </tr>
                </thead>
                <tbody>
                    {this.state.recordList.map(record => (                 
                        <Row
                            keyFieldName={this.props.keyFieldName}
                            key={record[this.props.keyFieldName]}
                            columnList={this.props.columnList}    
                            record={record}
                        />
                    ))}                 
                </tbody>
            </table>
        )   
    }

    setupPlugin() {
        this.$el = $(this.el);                    
        this.$el.DataTable({              
            "language": {"url": "https://cdn.datatables.net/plug-ins/1.10.25/i18n/Portuguese-Brasil.json"},
            "responsive": true,
            "order": [[ 1, "asc" ]],
            "columnDefs": [                
                { 
                    orderable: false, 
                    className: 'reorder', 
                    targets: 0 
                }
            ]           
        }); 
    }

    updatePlugin() {
        $(this.el).dataTable("ajax.reload()");        
    }
}

这是父组件，总线这个非常简单。

import React, { Component } from 'react'
import backEndAPI from '../../main/services/backEndAPI'
import BaseForm from '../../template/baseForm'

import DataTable from '../../template/dataTable/dataTable'

export default class CidadeList extends Component {

    tableColumns = [ 
        {"Caption": "Código", "FieldName": "ID", "alRight": true},
        {"Caption": "Nome", "FieldName": "Nome"},
        {"Caption": "Estado", "FieldName": "Estado"}            
    ]  

    state = {
        recordList: [],
    }    

    async componentDidMount() {
        await this.doGetRecords()      
    }

    async doGetRecords() {
        const response = await backEndAPI.get('/cidade');
        this.setState({ recordList: response.data });        
    }

    render(){
        return(
            <BaseForm
                caption='Cidades'
            >
             <div className='col-sm-12'>       
                 <div className="row">
                 </div>                 
                 <DataTable
                    tableName="CidadesList"
                    keyFieldName="ID"
                    columnList={this.tableColumns}
                    recordList={this.state.recordList}
                 />
             </div> 
         </BaseForm>  
        )   
    }
}

标签： jqueryreactjsdatatablescomponents