jquery datatables не работает идеально с реактивами, использующими lumen в качестве API

Question

Добрый день. Я работаю над небольшим проектом, использующим responsejs в качестве внешнего интерфейса и люмена для создания API. Я хочу получить все записи из базы данных и отобразить их в виде таблицы данных jquery. На самом деле он извлек все эти записи из БД (около 960 записей), но после извлечения он отображает «Нет данных в таблице», что затрудняет поиск и сортировку данных. Ниже мой код:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import $ from 'jquery';
import axios from 'axios';
import { TheProject } from './TheProject';   
import { Footer } from '../Footer'; 
import { Nav } from '../Nav';  
import { Header } from '../Header';

export class Projects extends Component {

constructor(props) {
    super(props);

    this.state = {
        projects: [],
        cur_email: localStorage.getItem('cur_email'),
        project_added: localStorage.getItem('project_added'),
        project_uploaded: localStorage.getItem('project_uploaded'),
        isUser: false,
        isLoaded: false
    }
}

componentDidMount() {

    let data = "email="+this.state.cur_email;

    axios({
        method: 'post',
        url: 'http://localhost:8000/projects',
        data: data,
        header: {
            'Content-Type': 'application/json'
        }
    }).then(response => {

        this.setState({
            projects: response.data,
            isUser: true,
            isLoaded: true
        });

    })
    .catch( error => {
        console.log(error);
    });
}

render() {

    let project_added_text = null;
    let project_uploaded_text = null;
    let display_projects = null;

    //display all projects in component 

    if(this.state.projects.length > 0) {

        display_projects = this.state.projects.map( (project,index) => {
            return <TheProject serial={index+1} title={project.title} researcher={project.researcher} matric={project.matric} supervisor={project.supervisor} year={project.year} degree={project.degree} field={project.field} keywords={project.keywords} abstract={project.abstract} added_on={project.created_at} updated_on={project.updated_at}/> 
        });
    }

    if(this.state.project_added) {
        project_added_text = "Project was successfully added";
        localStorage.removeItem('project_added');
    } else if(this.state.project_uploaded) {

        if(this.state.project_uploaded == 1) {
            project_uploaded_text = this.state.project_uploaded+ " project was successfully uploaded";
        } else if(this.state.project_uploaded > 1) {
            project_uploaded_text = this.state.project_uploaded+ " projects were successfully uploaded";
        } 

        localStorage.removeItem('project_uploaded');
    } 


    return (

        <div>

            <div id="container" className="effect aside-float aside-bright mainnav-lg">

                <Header/>

                <div className="boxed">

                    <div id="content-container">

                        <div id="page-content">

                            <div className="row">

                                <div className="col-xs-12">

                                    <div className="tabs-container">

                                        <div className="tab-content">

                                        <div align="center">

                                            <Link to="/add-project" className="btn btn-info"><i className="ion-plus-circled"></i> Add New Project </Link> &nbsp; &nbsp; &nbsp; &nbsp;
                                            <Link to="/upload-project" className="btn btn-mint"><i className="fa fa-upload"></i> Upload Projects </Link>
                                        </div> <br/>

                                        <div className="tab-content">

                                            <div align="left">
                                                <p className="text-success"> {project_added_text} </p>
                                                <p className="text-success"> {project_uploaded_text} </p>
                                            </div>

                                            <div className="panel">
                                                <div className="panel-heading">
                                                    <h3 className="panel-title"><i className="fa fa-bars"></i> Projects </h3>
                                                </div>
                                            </div>

                                            <table id="demo-dt-basic" className="table table-striped table-bordered" style={{cellSpacing:0,width:'100%'}}>
                                                <thead>
                                                    <tr>
                                                        <th>Title</th>
                                                        <th>Researcher</th>
                                                        <th>Matric no.</th>
                                                        <th>Supervisor</th>
                                                        <th>Pub. on</th>
                                                        <th>Degree</th>
                                                        <th>Field</th>
                                                        <th>Keywords</th>
                                                        <th>Abstract</th>
                                                        <th>Added on</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                   {display_projects}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>

                    <Nav/>

                    <div style={{clear:'both'}}> </div>

                    <Footer/>

                    <button className="scroll-top btn">
                        <i className="pci-chevron chevron-up"></i>
                    </button>

                </div>
            </div>
        </div>
    </div>

    );
   }
}

Код для компонента TheProject выглядит так:

import React from 'react';

export const TheProject = (props) => {

 return (
    <tr>
        <td> {props.title} </td>
        <td> {props.researcher} </td>
        <td> {props.matric} </td>
        <td> {props.supervisor} </td>
        <td> {props.year} </td>
        <td> {props.degree} </td>
        <td> {props.field} </td>
        <td> {props.keywords} </td>
        <td> {props.abstract} </td>
        <td> {props.added_on} </td> 
    </tr>
   )

}

Когда я вставляю какое-то фиктивное содержимое в виде строк данных таблицы, он работает хорошо, не показывая «Нет данных, доступных в таблице», но всякий раз, когда я получаю данные из базы данных, он отображает «Нет данных, доступных в таблице», но все равно получает все данные. записи, и это препятствует работе поиска и сортировки.

Спасибо.