0

我正在使用Material-UI并从后端获取数据。后端没有问题，但我不知道如何循环数据并使用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 />;
}
4

2 回答 2

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
      }}
    />
  );
}

为了使它更容易，您还可以提供您的 fetch 函数（fakeFetch在这种情况下）作为数据值；

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

工作沙箱链接

于 2020-01-24T09:41:59.507 回答
0

根据材料表方法，您必须将所有获取的数据放在组件内的data道具上MaterialTable。据我所知，在这种情况下使用材料表库没有循环。

假设您的数据对象中的属性与您的columns道具中指定的字段名称匹配（如果不匹配，则从您获取的数据中创建一个与列字段匹配的对象数组，反之亦然）。

并且代码将只是data在您的表格中添加道具：

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

请记住，您还可以使用文档中描述的远程数据方法，它使您可以立即查询数据并data在表的道具中获取数据。

于 2020-01-24T09:39:47.667 回答