数据未出现在数据表中

Question

数据更新数据表

import React, { Component } from 'react';
import Linkify from 'react-linkify';
import './CobaData.css';
import './css/jquery.dataTables.css';

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

export default class CobaData extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.data;
        let printData = data;
        console.log(printData);
        let table = $('#exc').dataTable(
            {
                data: printData,
                columns: [
                    { title: "ID" },
                    { title: "Nama" },
                    { title: "Nomor KTP" },
                    { title: "Nomor HP" },
                ],
                searchable: false,
                orderable: false,
                targets: 0,
            }
        );
        console.log(table);

        return (
            <div>
                <table className="display" width="100%" id="exc" >

                </table>
            </div>
        );
    }
}

数据无法显示数据表，而在 console.log（printData）中可以在“控制台”中读取

在我使用普通表之前可以在表上读取，但是使用datatables时不能在表上读取数据

Answer 1

在React应用中使用jQuery并不是一个好方法。

相反，我建议您使用react-data-table-component。

然后您的组件将如下所示：

import React, { Component } from 'react';
import DataTable from 'react-data-table-component';
import Linkify from 'react-linkify';
import './CobaData.css';

const columns = [
  {
    name: 'ID',
    selector: 'id_karyawan'
  },
  {
    name: 'Nama',
    selector: 'nama'
  },
  {
    name: 'Nomor KTP',
    selector: 'KTP'
  },
  {
    name: 'Nomor HP',
    selector: 'no_hp'
  },
];

export default class CobaData extends Component {
    render() {
        let data = this.props.data;
        return (
          <DataTable
          title="Arnold Movies"
          columns={columns}
          data={data}
          />
        );
    }
}