来自React渲染方法q

Question

**我从render方法开始时的状态定义了一个常量变量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

我有这个对象数组，如果我手动将其传递给render方法中的options.data变量，它可以完美地工作。

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

为什么手动传递对象数组和从blog变量传递对象数组无效？有什么想法吗？

那是Datatable组件代码

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

Answer 1

因为博客在初始渲染时是未定义的

vue-cli-service serve