Javascript 获取错误-如果对上面的列使用非字符串访问器，则需要列id-React

下面是反应表的示例-

我有一个React表，它将有13列，对于少数列，我们有子列，而对于少数列，我们有单独的列

假设在本表中，第1列到第10列是独立的。在第11列到第13列中，我们有父列和子列的概念

在前10列中，列将没有访问器，而列6到10将在一行中有上述列（1到5）的访问器，在新行中有它们自己的（6到10）访问器

我主要修改了名为columns的常量

    const columns = [{
  id: 'col16',
  Header: () => {
    (
      <div>
        <div className="col1">
          Col 1
            </div>
        <div className="col6">
          Col 6
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col27',
  Header: () => {
    (
      <div>
        <div className="col2">
          Col 2
            </div>
        <div className="col7">
          Col 7
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col38',
  Header: () => {
    (
      <div>
        <div className="col3">
          Col 3
            </div>
        <div className="col8">
          Col 8
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col49',
  Header: () => {
    (
      <div>
        <div className="col4">
          Col 4
            </div>
        <div className="col9">
          Col 9
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col510',
  Header: () => {
    (
      <div>
        <div className="col5">
          Col 5
            </div>
        <div className="col10">
          Col 10
            </div>
      </div>
    );
  },
  accessor: (d) => { return (d.firstname + d.lastName); },
  width: 200
},
{
  id: 'col11',
  Header: 'Col 11',
  columns: [
    {
      Header: 'Sub Col 11a',
      accessor: (d) => { return (d.firstname); },
      width: 80,
    },
    {
      Header: 'Sub Col 11b',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 11c',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 11d',
      accessor: (d) => { return (d.firstname); },
      width: 80
    }
  ]
},
{
  id: 'col12',
  Header: 'Col 12',
  columns: [
    {
      Header: 'Sub Col 12',
      accessor: (d) => { return (d.firstname); },
      width: 80
    }
  ]
},
{
  id: 'col13',
  Header: 'Col 13',
  columns: [
    {
      Header: 'Sub Col 13a',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 13b',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 13c',
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    {
      Header: 'Sub Col 13d',
      accessor: (d) => { return (d.firstname); },
      width: 80
    }
  ]
}];

const列=[{
id:'col16'，
标题：（）=>{
(
第1列
第6栏
);
},
访问器：（d）=>{return（d.firstname+d.lastName）；}，
宽度：200
},
{
id:‘col27’，
标题：（）=>{
(
第2列
第7栏
);
},
访问器：（d）=>{return（d.firstname+d.lastName）；}，
宽度：200
},
{
id:'col38'，
标题：（）=>{
(
第3列
第8栏
);
},
访问器：（d）=>{return（d.firstname+d.lastName）；}，
宽度：200
},
{
id:'col49'，
标题：（）=>{
(
第4列
第9栏
);
},
访问器：（d）=>{return（d.firstname+d.lastName）；}，
宽度：200
},
{
id:'col510'，
标题：（）=>{
(
第5列
第10栏
);
},
访问器：（d）=>{return（d.firstname+d.lastName）；}，
宽度：200
},
{
id:'col11'，
标题：“第11列”，
栏目：[
{
标题：“第11a子栏”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80，
},
{
标题：“第11b子栏”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
},
{
标题：“第11c子栏”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
},
{
标题：“子列11d”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
}
]
},
{
id:'col12'，
标题：“第12列”，
栏目：[
{
标题：“第12分栏”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
}
]
},
{
id:'col13'，
标题：“第13列”，
栏目：[
{
标题：“第13a子栏”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
},
{
标题：“第13b子栏”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
},
{
标题：“第13c分栏”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
},
{
标题：“第13d子列”，
访问器：（d）=>{return（d.firstname）；}，
宽度：80
}
]
}];

我还创建了一个代码沙盒。这是我的代码沙盒

我收到一个错误-如果对上面的列使用非字符串访问器，则需要列id

---

我需要其他Stackoverflow成员的帮助。我在哪里犯了这个错误？

您需要在所有带有访问器的列中都有id字段。在代码中，您需要为每个这样的内部列设置id字段

{
  id: 'col13',
  Header: 'Col 13',
  columns: [
    {
      Header: 'Sub Col 13a',
      id: 'sub_col_13a', // <-here
      accessor: (d) => { return (d.firstname); },
      width: 80
    },
    ...
  ]
}

{
id:'col13'，
标题：“第13列”，
栏目：[
{
标题：“第13a子栏”，
id:'sub_col_13a'，//{return（d.firstname）；}，
宽度：80
},
...
]
}

@Hemadri Dasari你能找到我犯的错误吗？@Vishal Gulati你能找到我犯的错误吗？@David你能找到我犯的错误吗？@Janaka Chathuranga你能找到我犯的错误吗？@kiranvj你能找到我犯的错误吗？