来自API的数据时如何在Reactjs中使用Datatable

如何解决来自API的数据时如何在Reactjs中使用Datatable

我已经使用axios解析API。之后，我得到了值，然后将其添加到Datatable的属性Data中，但仍然无法正常工作。该值未解析为Datatable。当我console.log时，数据正在显示。我正在使用https://jsonplaceholder.typicode.com/users中的API。

听说我的代码是

import "./css/jquery.dataTables.css";
import React,{ Component } from "react";
import axios from "axios";

const $ = require("jquery");
$.Datatable = require("datatables.net");


export default class Tbl extends Component {
     constructor(props) {
         super(props);
         this.state = {
             users: [],loading: true,};
     }

     //option 1
     async getUsersData() {
         const res = await axios.get("https://jsonplaceholder.typicode.com/users");
         console.log(res.data);
         this.setState({ loading: false,users: res.data });
     }

    //option 2
     async getUsersData1() {
         const res = await axios.get("https://jsonplaceholder.typicode.com/users");
         return res.data;
     }

     componentDidMount() {
        //call option 1
        this.getUsersData();

         this.$el = $(this.el);
         this.$el.DataTable({
             data: this.state.users,//option 1
             data: this.getUsersData1(),//option 2
             columns: [
                 { title: "Name",data: "name" },{ title: "Username",data: "username" },{ title: "Email",data: "email" },{ title: "Phone",data: "phone" },{ title: "Website",data: "website" }
             ],});
     }

     componentWillMount() {}

     render() {
         return (
             <table className="display" width="100%"
                 ref={(el) => (this.el = el)}>
             </table>
         );
     }
}

我已经尝试过选项1和选项2，但仍然无法正常工作。

谢谢

解决方法

我在这里看到的问题是您以错误的方式初始化了插件表。为了包含DataTable插件，您应以require('datatables.net')(window,$)的身份调用。然后，在完成数据加载后，您只需简单地将同步数据再次调用到表中即可。这是代码段：

const $ = require("jquery");
require("datatables.net")(window,$);

// Keep as you have done
async getUsersData() {
  const res = await axios.get("https://jsonplaceholder.typicode.com/users");
  console.log(res.data);
  this.setState({ loading: false,users: res.data });
}

// Init table data as component is mounted
componentDidMount() {
  this.getUsersData().then(() => this.syncTable());
}

// Split as new function to init the datatable
syncTable() {
  this.$el = $(this.el);
  this.$el.DataTable({
    data: this.state.users,//option 1
    // data: this.getUsersData1(),//option 2
    columns: [
      { title: "Name",data: "name" },{ title: "Username",data: "username" },{ title: "Email",data: "email" },{ title: "Phone",data: "phone" },{ title: "Website",data: "website" }
    ]
  });
}

以下是您的代码和框：https://codesandbox.io/s/gallant-faraday-e25mk?file=/src/App.js

,

使用“react-data-table-component”库。是最好的数据表库。

运行此命令进行安装

npm install react-data-table-component styled-components

那你就得在react组件页面中导入并使用

import DataTable from 'react-data-table-component';

const data = [{ id: 1,title: 'DataTable in ReactJS',year: '2021' } ...];
const columns = [
{
   name: 'Name',selector: 'name',sortable: true,},{
   name: 'Username',selector: 'username',{
   name: 'Email',selector: 'email',{
   name: 'Phone',selector: 'phone',{
   name: 'Website',selector: 'website',];

class MyComponent extends Component {
   render() {
     return (
        <datatable title="YourBlogCoach" columns="{columns}" data="{data}"> 
        </datatable>
     )
   }
};

查看 here 以获取教程