Javascript 当数据来自API时，如何在Reactjs中使用Datatable

我已经在使用axios分析API了。在这之后，我得到了这个值，然后我将其添加到Datatable中的属性

Data

，但仍然不起作用。该值未解析为

Datatable

。当I

console.log

显示数据时。我正在使用

https://jsonplaceholder.typicode.com/users

这是我的密码：

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>
         );
     }
}

导入“/css/jquery.dataTables.css”； 从“React”导入React，{Component}； 从“axios”导入axios； const$=require（“jquery”）； $.Datatable=require（“datatables.net”）； 导出默认类Tbl扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 用户：[]， 加载：对， }; } //选择1 异步getUsersData（）{ const res=等待axios.get（“https://jsonplaceholder.typicode.com/users"); console.log（res.data）； this.setState（{loading:false，users:res.data}）； } //选择2 异步getUsersData1（）{ const res=等待axios.get（“https://jsonplaceholder.typicode.com/users"); 返回res.data； } componentDidMount（）{ //看涨期权1 这个.getUsersData（）； this.$el=$（this.el）； 这是$el.DataTable({ 数据：this.state.users，//选项1 数据：this.getUsersData1（），//选项2 栏目：[ {标题：“名称”，数据：“名称”}， {标题：“用户名”，数据：“用户名”}， {标题：“电子邮件”，数据：“电子邮件”}， {标题：“电话”，数据：“电话”}， {标题：“网站”，数据：“网站”} ], }); } componentWillMount（）{} render（）{ 返回( （this.el=el）}> ); } } 我已经尝试了选项1和选项2，但仍然不起作用

---

谢谢，

我在这里看到的问题是，您以错误的方式初始化插件表。为了包含

DataTable

插件，您应该调用as

require（'datatables.net'）（window，$）

。然后，在加载完数据之后，只需再次调用表中的同步数据即可。以下是片段：

const$=require（“jquery”）；
需要（“datatables.net”）（窗口，$）；
//保持原样
异步getUsersData（）{
const res=等待axios.get（“https://jsonplaceholder.typicode.com/users");
console.log（res.data）；
this.setState（{loading:false，users:res.data}）；
}
//安装组件时的初始化表数据
componentDidMount（）{
this.getUsersData（）。然后（（）=>this.syncTable（））；
}
//拆分为新函数以初始化datatable
同步表（）{
this.$el=$（this.el）；
这是$el.DataTable({
数据：this.state.users，//选项1
//数据：this.getUsersData1（），//选项2
栏目：[
{标题：“名称”，数据：“名称”}，
{标题：“用户名”，数据：“用户名”}，
{标题：“电子邮件”，数据：“电子邮件”}，
{标题：“电话”，数据：“电话”}，
{标题：“网站”，数据：“网站”}
]
});
}

这是为您准备的代码沙盒：

使用“”库。它是数据表的最佳库

运行此命令以安装它

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',
   sortable: true,
},
{
   name: 'Email',
   selector: 'email',
   sortable: true,
},
{
   name: 'Phone',
   selector: 'phone',
   sortable: true,
},
{
   name: 'Website',
   selector: 'website',
   sortable: true,
},
];

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

从“反应数据表组件”导入数据表；
const data=[{id:1，title:'DataTable in ReactJS'，年份：'2021'}…]；
常量列=[
{
姓名：'姓名'，
选择器：“名称”，
可排序：是的，
},
{
名称：“用户名”，
选择器：“用户名”，
可排序：是的，
},
{
名称：'电子邮件'，
选择器：“电子邮件”，
可排序：是的，
},
{
姓名：'电话'，
选择器：'电话'，
可排序：是的，
},
{
名称：'网站'，
选择器：“网站”，
可排序：是的，
},
];
类MyComponent扩展组件{
render（）{
返回(
)
}
};

---

检查教程

Hi是否有错误日志？如果有，你能告诉我们吗？@elpmid没有错误。结果就是my console.log。我想，我没有像

this.state.users那样正确地设置数据，但仍然不能很好地运行银行。你很快拯救了我的生命和时间。但是对于
require（“datatables.net”）（窗口，$）
它对我不起作用，因为hv error
无法设置未定义的属性“$”
我仍然使用
$.Datatable=require（“datatables.net”）
，工作正常