Блог

** Я определил одну постоянную переменную blog из состояния в начале метода рендеринга. Он содержит массив объектов, которые выводятся на консоль, а затем передаются в DataTable качестве options.data реквизита.**

 import React, {Component} from "react";
import axios from "axios";
//import { WidgetGrid } from "../../../common/widgets/components";
import { Stats } from "../../../common/layout/components";
import { BigBreadcrumbs } from "../../../common/navigation";
import {
    WidgetGrid,
    JarvisWidget
} from "../../../common";
import Datatable from "../../../common/tables/components/Datatable";


export default class AllBlogs extends Component {

    state = {
        blogs: []
    }


    componentDidMount() {
        this.setState(() => ({blogs:[
            {
                "title":"Всемогущая функция Query — подробное руководство",
                "author":1,
                "viewers":213
            },
            {
                "title":"Всемогущая функция Query — подробное руководство",
                "author":1,
                "viewers":213
            }
        ]

        }))

    }



    render() {
        const {blogs} = this.state;
        console.log(this.state.blogs);
        return (

            <div id="content" className="animated fadeInUp">
                <WidgetGrid>
                    <div className="row">
                        <article className="col-sm-12">
                            <JarvisWidget id="wid-id-0" editbutton={false} color="darken">
                                <header>
                  <span className="widget-icon">
                    <i className="fa fa-table"/>
                  </span>
                                <h2>Standard Data Tables</h2>
                                </header>

                                <div>
                                    <div className="widget-body no-padding">

                                        <Datatable

                                              options={{
                                               data: {blogs},
                                               columns: [
                                                    {data: "title"},
                                                    {data: "author"},
                                                    {data: "viewers"},
                                             ]
                                            }}


                                            paginationLength={true}
                                            className="table table-striped table-bordered table-hover"
                                            width="100%"
                                        >
                                            <thead>
                                            <tr>
                                                <th data-hide="phone">Picture</th>
                                                <th data-hide="phone">Title</th>
                                                <th data-class="expand">
                                                    <i className="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs" />
                                                    Viewers
                                                </th>
                                                <th data-hide="phone">
                                                    <i className="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs" />
                                                    Author
                                                </th>

                                            </tr>

                                            </thead>


                                        </Datatable>
                                    </div>
                                </div>
                            </JarvisWidget>
                        </article>
                    </div>
                </WidgetGrid>
            </div>
        );

    }
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>  

Это то, что console.log отображает:
http://prntscr.com/myzbz0

У меня есть этот массив объектов, и он отлично работает, если я вручную передаю его в options.data переменную в методе рендеринга.

 [
  {
    "title":"Всемогущая функция Query — подробное руководство",
    "author":1,
    "viewers":213
  },
  {
    "title":"Всемогущая функция Query — подробное руководство",
    "author":1,
    "viewers":213
  }
]
  

Почему ручная передача массива объектов сработала, а передача массива объектов из blog переменной не сработала? Есть идеи?

Это код компонента с возможностью обработки данных

     import React from "react";

import $ from "jquery";

require("datatables.net-bs");
require("datatables.net-buttons-bs");
require("datatables.net-buttons/js/buttons.colVis.js");
require("datatables.net-buttons/js/buttons.flash.js");
require("datatables.net-buttons/js/buttons.html5.js");
require("datatables.net-buttons/js/buttons.print.js");
require("datatables.net-colreorder-bs");
require("datatables.net-responsive-bs");
require("datatables.net-select-bs");

export default class Datatable extends React.Component {
  componentDidMount() {
    this.datatable(this.props.data);
  }

  datatable() {
    const element = $(this.refs.table);
    let { options } = { ...this.props } || {};

    let toolbar = "";
    if (options.buttons) toolbar  = "B";
    if (this.props.paginationLength) toolbar  = "l";
    if (this.props.columnsHide) toolbar  = "C";

    if (typeof options.ajax === "string") {
      let url = options.ajax;
      options.ajax = {
        url: url,
        complete: function(xhr) {
          // AjaxActions.contentLoaded(xhr)
        }
      };
    }

    options = {
      ...options,
      ...{
        dom:
          "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'"  
          toolbar  
          ">r>"  
          "t"  
          "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        oLanguage: {
          sSearch:
            "<span class='input-group-addon input-sm'><i class='glyphicon glyphicon-search'></i></span> ",
          sLengthMenu: "_MENU_"
        },
        autoWidth: false,
        retrieve: true,
        responsive: true
      }
    };

    const _dataTable = element.DataTable(options);

    if (this.props.filter) {
      // Apply the filter
      element.on("keyup change", "thead th input[type=text]", function() {
        _dataTable
          .column(
            $(this)
              .parent()
              .index()   ":visible"
          )
          .search(this.value)
          .draw();
      });
    }

    if (!toolbar) {
      element
        .parent()
        .find(".dt-toolbar")
        .append(
          '<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>'
        );
    }

    if (this.props.detailsFormat) {
      const format = this.props.detailsFormat;
      element.on("click", "td.details-control", function() {
        const tr = $(this).closest("tr");
        const row = _dataTable.row(tr);
        if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass("shown");
        } else {
          row.child(format(row.data())).show();
          tr.addClass("shown");
        }
      });
    }
  }

  render() {
    let {
      children,
      options,
      detailsFormat,
      paginationLength,
      ...props
    } = this.props;
    return (
      <table {...props} ref="table">
        {children}
      </table>
    );
  }
}
  

Поскольку блоги будут неопределенными для первоначального рендеринга

     <Datatable

       options={{
       data: {blogs amp;amp; blogs},
       columns: [
       {data: "title"},
        {data: "author"},
        {data: "viewers"},
      ]
 }}