Как получить данные из API уже в реквизит, используя MDBDataTable - PullRequest
Новая
       28

Как получить данные из API уже в реквизит, используя MDBDataTable

0 голосов
/ 23 марта 2020 
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;

Это мои данные из массива: enter image description here

Как изменить мои строки для отображения этих данных? Данные в порядке, этот компонент получает их. Хорошо выглядит в консоли: (console.log (props.data);) Есть идеи? Большое спасибо.

Tbale показывает Ok, но это тестовые данные, полученные из моих данных, поступающих из моего API.

1 Ответ

0 голосов
/ 23 марта 2020

Вам действительно нужно использовать данные, поступающие с вашего props, если вы хотите, чтобы они отображались в таблице. Поскольку формат поступающих данных совпадает с тем, что ожидает таблица, вам не нужно применять какие-либо преобразования. Этого должно быть достаточно. 

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