无法在react.js中渲染数据表的数据

时间:2019-09-05 06:13:58

标签: reactjs datatables

我无法将API中的数据获取到reactjs中的数据表中。它仅返回值,但不返回数据表形式的数据

import React, { Component } from "react";

const $ = require("jquery");
$.DataTable = require("datatables.net");

class Tables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      data: [],
    };
  }

  componentDidMount() {
    console.log("table is ", this.el);
    let element = $(this.el);
    element.DataTable({
      data: this.props.data,
      columns: [{ title: "Key" }, { title: "Value" }],
    });

    fetch("https://randomuser.me/api/?results=10")
      .then(results => {
        console.log("results are ", results);
        return results.json();
      })
      .then(data => {
        console.log("data is ", data);
        let pictures = data.results.map((value, index) => {
          console.log("picture is ", value);
          console.log("index is", index);

          return (
            <table className="display" ref={el => (this.el = el)}>
              {this.value.registered.date}
            </table>
          );
        });
        this.setState({ pictures: pictures });
        console.log("state", this.state.pictures);
      });
  }

  render() {
    return (
      <table className="display" ref={el => (this.el = el)}>
        {this.state.pictures}
      </table>
    );
  }
}
export default Tables;

1 个答案:

答案 0 :(得分:0)

我的API响应格式为{“ teen1”:“ 100”,“ teen2”:“ 200”}。但是ttable除外,格式为[“ teen1”,“ 100”],[“ teen1”,“ 100”]。这就是我相信它无法获取数据的原因