Question

我在应用程序中使用数据表来显示从api获取的数据，但数据表未显示表中的可用数据。

我正在从API获取数据，并且希望将其显示在表上，为此，我使用了数据表，但是问题是当组件呈现时，第一行显示数据不可用，然后下面的数据是显示了从API那里获得的信息，它不能正常工作，我认为问题是实例化，无法对其进行分类，这是我的以下代码：

 componentDidMount() {

    fetch('http://127.0.0.1:8000/chauffeur/create_driver_profile/')
        .then(response=>response.json())
        .then(driversJson => this.setState({data: driversJson})
        );

    console.log("Component did mount");

}

 render(){

   return(

<div className="panel-body panel-collapse">
   <table id="driver_details" className="table table-striped dataTable" width="100%">
                                <thead>
                                <tr>
                                    <th>Fore Name</th>
                                    <th>Surname</th>
                                    <th>License Number</th>
                                    <th>Country</th>
                                    <th>Registration</th>
                                </tr>
                                </thead>
                                <tbody>
                                {
                                    this.state.data.map(driver=>{
                                        return(
                                            <tr key={driver.id}>
                                                <td>{driver.forename}</td>
                                                <td>{driver.surname}</td>
                                                <td>{driver.country}</td>
                                                <td>{driver.licensenumber}</td>
                                                <td>{driver.registration}</td>
                                            </tr>
                                        )
                                    })
                                }
                                </tbody>

                            </table>

  )}

在react的index.html文件中，我正在初始化数据表组件：

          -------------------CSS-----------------------

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/autofill/2.3.3/css/autoFill.dataTables.min.css">


       ---------------------Javascript(jquery)----------------------

       <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/autofill/2.3.3/js/dataTables.autoFill.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>

 $(document).ready( function () {
    $('#driver_details').DataTable();
  } );

从上面的代码中我得到了表，但是它显示没有可用的数据，而在下面的位置我正在获取数据，但是它不能正常工作。我认为问题在于数据表的实例化，并且可能未正确集成与我的react组件一起建议如何解决

数据表无法正常工作，它表明没有可用的数据React js

0 个答案: