javascript - 如何使用 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;

这是我来自数组的数据：

如何修改我的行以显示此数据？数据正常，该组件正在接收它。在控制台中看起来不错：(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
}