Javascript 如何使用对象键在mui数据表中设置列名

我正在尝试使用对象键来设置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}
    />
  );
}

函数可复用（{forms}）{
console.log（“cols”，columns）；
返回(
);
}

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

---

非常感谢您的帮助。

您需要像这样使用

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

从“React”导入React；
从“react dom”导入react dom；
从“mui数据表”导入MUIDataTable；
从“@material ui/core”导入{排版}；
导入“/styles.css”；
函数App（）{
常数数据=[
{
姓名：“帕特”，
公司：“测试公司”，
城市：“扬克斯”，
国家：“纽约”，
儿童：[
{儿童姓名：“Pat Jun”，儿童年龄：2}，
{儿童姓名：“Mary Jun”，儿童年龄：2}
]
}
];
常量列=[
{
姓名：“儿童”，
标签：“子名称”，
选项：{
过滤器：对，
排序：对，
customBodyRender：（值、tableMeta、updateValue）=>(
{value.map（child=>child.childName.join（“，”）}
)
}
}
];
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

非常感谢@Klaus您的回答。这几乎是我必须做的，但在我的例子中，我只想在对象子对象中显示第一个childName，它位于一个对象数组中。 因此，我不得不对它进行一些调整，并改变我的数据结构

这就是我最后做的。 我首先在我的数据结构中添加了一个简单的数组，该数组完全独立于包含子对象childNames的数组，后者只包含名称

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

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

const列=[
{
姓名：“儿童姓名”，
标签：“子名称”，
选项：{
过滤器：对，
customBodyRender：（值、tableMeta、updateValue）=>{
返回{value[0]}；
}
}
},

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

非常感谢你的帮助