Как l oop данных и распечатать в таблице, используя материал пользовательского интерфейса

Question

Я работаю с Material-UI и получаю данные из бэкэнда. С бэкэндом проблем нет, но я не знаю, как l oop данные и распечатать их в табличном формате, используя Material-UI. Кто-нибудь может подсказать мне, как печатать данные в табличном формате?

Вот мой код:

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { getProducts } from "../../services/products";
import MaterialTable, { MTableToolbar } from "material-table";

const productsList = props => {
  const [data, setData] = useState([]);
  const [state] = React.useState({
    columns: [
      { title: "Brand", field: "brand" }, //assume here my backend schema is brand
      { title: "Price", field: "price" }, //here price
      { title: "Model no", field: "model" } //here model
    ]
  });

  const getProducts = async () => {
    try {
      const res = await getProducts();
      setData(res.data);
      console.log(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getProducts();
  }, []);

  return (
    <MaterialTable
      components={{
        Toolbar: props => {
          return (
            <div>
              <MTableToolbar {...props} />
            </div>
          );
        }
      }}
      options={{
        actionsColumnIndex: 5,
        selection: true
      }}
    />
  );
};
export default function Company() {
  return <productsList />;
}

Answer 1

Вы должны установить значения data и columns. Попробуйте это так:

import React, { useState, useEffect } from "react";
import MaterialTable, { MTableToolbar } from "material-table";

const fakeFetch = () => {
  return new Promise(resolve => {
    resolve({
      data: [
        { brand: "brand 1", price: 1, model: "123" },
        { brand: "brand 2", price: 1, model: "456" },
        { brand: "brand 3", price: 1, model: "789" }
      ]
    });
  });
};

export default function App() {
  const [data, setData] = useState([]);
  // When the columns don't change you don't need to hold it in state
  const columns = [
    { title: "Brand", field: "brand" }, //assume here my backend schema is brand
    { title: "Price", field: "price" }, //here price
    { title: "Model no", field: "model" } //here model
  ];

  const getProducts = async () => {
    try {
      const res = await fakeFetch();
      setData(res.data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getProducts();
  }, []);

  return (
    <MaterialTable
      columns={columns}  // <-- Set the columns on the table
      data={data}        // <-- Set the data on the table
      components={{
        Toolbar: props => {
          return (
            <div>
              <MTableToolbar {...props} />
            </div>
          );
        }
      }}
      options={{
        actionsColumnIndex: 5,
        selection: true
      }}
    />
  );
}

Чтобы сделать это еще проще, вы можете также указать функцию выборки (fakeFetch в этом случае) в качестве значения данных;

data={fakeFetch} // <-- Using this you wouldn't need the [data, setData], getProducts and useEffect code.

Рабочая песочница ссылка

Answer 2

В соответствии с подходом таблицы материалов вы должны поместить все полученные данные в подпорку data внутри компонента MaterialTable. Итак, насколько я понимаю, в этом случае не выполняется цикл с использованием библиотеки таблиц материалов.

Если предположить, что атрибуты в вашем объекте данных соответствуют именам полей, указанным в columns проп (если нет, создайте массив объектов из выбранных вами данных, который соответствует полям столбца или наоборот).

И код будет просто добавлением data проп в вашей таблице:

<MaterialTable
  // ... existing props
  data={data}
/>

Имейте в виду, что вы также можете использовать подход удаленные данные , как описано в документации, который дает вам возможность немедленно запрашивать ваши данные и извлекать их внутри data таблицы. .