0

我正在尝试使用对象键来设置 MUI 数据表中列的名称。我正在尝试使用 children.childName 的第一个元素设置其中一个列名，以便在该列中显示子名列表，但仅显示第一个子项。

在我尝试这个的当前方式中，我没有收到任何错误，并且它在表格的 childName 列中没有显示任何内容。

如何访问数组内的对象？

显示表的屏幕截图

这是我的数据：

    const data = [
  {
    name: "Pat",
    company: "Test Corp",
    city: "Yonkers",
    state: "NY",
    children: [
      { childName: "Pat Jun", childAge: 2 },
      { childName: "Mary Jun", childAge: 2 }
    ]
  },
];


    const columns = [
  {
    name:name: data[0]["children"][0]["childName"],
    label: "Child Name",
    options: {
      filter: true,
      sort: true
    }
  }]

MuiTable.js 

function MuiTable({ forms }) {
  console.log("cols", columns);
  return (
    <MUIDataTable
      title={"Title"}
      data={data}
      columns={columns}
      options={options}
    />
  );
}

通过执行 console.log 我可以看到它正在打印值而不是对象键名

列的控制台日志

我真的很感激任何帮助，谢谢。

4

2 回答 2

1

你需要customBodyRender像这样使用：

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import { Typography } from "@material-ui/core";

import "./styles.css";

function App() {
  const data = [
    {
      name: "Pat",
      company: "Test Corp",
      city: "Yonkers",
      state: "NY",
      children: [
        { childName: "Pat Jun", childAge: 2 },
        { childName: "Mary Jun", childAge: 2 }
      ]
    }
  ];

  const columns = [
    {
      name: "children",
      label: "Child Names",
      options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => (
          <Typography>
            {value.map(child => child.childName).join(",")}
          </Typography>
        )
      }
    }
  ];

  return (
    <div>
      <MUIDataTable title={"Title"} data={data} columns={columns} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
于 2019-12-11T12:54:50.403 回答
0

非常感谢@Klaus 您的回答。这几乎是我必须做的，但就我而言，我只想在对象数组中的对象 children 中显示第一个 childName。所以我不得不稍微调整一下并改变我的数据结构。

这就是我最终做的。我首先在我的数据结构中添加了一个简单的数组，该数组与包含名为 childNames 的子对象的数组完全分开，该数组仅包含名称。

包含 childNames 数组的新数据结构

这使得访问 childNames 变得更加容易，因为它只是一个没有嵌套在任何东西中的简单数组。所以我只是在 Table 上显示了数组中的第一个元素

const columns = [
{
  name: "childNames",
  label: "Child Name",
  options: {
    filter: true,
    customBodyRender: (value, tableMeta, updateValue) => {
      return <div>{value[0]}</div>;
    }
  }
},

我只为 childNames 创建一个数组的原因是，尝试只访问包含子对象的数组中的第一个 childName 被证明非常复杂和困难。

非常感谢所有的帮助。

于 2019-12-13T12:59:19.973 回答