如何使用MDBDataTable从props中已经存在的api中获取数据

Question

import React from "react";
import { List, Avatar, Icon } from "antd";
import { MDBTable, MDBTableBody, MDBTableHead } from 'mdbreact';
import { MDBDataTable } from 'mdbreact';
const IconText = ({ type, text }) => (
  <span>
    <Icon
      type={type}
      style={{
        marginRight: 8
      }}
    />
    {text}
  </span>
);
const Articles = props => {
  console.log(props.data);

  const data = {
    columns: [
      {
        label: 'Title',
        field: 'title',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Content',
        field: 'content',
        sort: 'asc',
        width: 270
      }
    ],
    rows: [
      {
        title: '{props.title}',
        content: 'xxxxxxxxxxxxxxxxxxxxxxxxxxSystem Architect',
      },
      {
        title: '{props.title2}',
        content: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzSystem Architect2',
      }
    ] 
  };
  return (
    <MDBDataTable
      striped
      bordered
      small
      data={data}
    />
  );
};
export default Articles;

这是我在数组中的数据：

​

如何修改我的行以显示此数据？数据是OK的，这个组件正在记录它。控制台看起来不错：(console.log(props.data);)有什么想法吗？非常感谢。

Tbale显示Ok BUt，测试数据来自我的API数据。

Answer 1

如果您希望数据反映在表中，则需要实际使用来自props的数据。由于传入数据的格式与表预期的格式相同，因此不需要应用任何转换。这应该足够了。

const data = {
  columns: [
    {
      label: 'Title',
      field: 'title',
      sort: 'asc',
      width: 150,
    },
    {
      label: 'Content',
      field: 'content',
      sort: 'asc',
      width: 270,
    },
  ],
  rows: props.data
}