Javascript Reactjs遇到两个具有相同键“NaN”的子项。密钥应该是唯一的

我尝试了不同的方法来消除遇到的两个孩子使用相同的钥匙，

NaN

。密钥应该是唯一的，这是部分日志：

in DynamicFields (at TableHeader.js)
in th (at TableHeader.js)
in TableHeader

这基本上就是TableHeader.js组件的这一部分，完整的代码粘贴在此页面的下方：

return (
        <th key={cleanTitle + - + index}
            ref={(th) => th = th}
            style={{width:width}}
            data-col={cleanTitle}
         >

         <span className="header-cell" key={index*11}>{title} </span>
         <DynamicFields key={header.index+title} parentIndex={(index + 3) + title} />
       </th>
      );

import React from "react";
import DynamicFields from "../DynamicFields";

const TableHeader = (props) => {
  let FieldTypes = ["text", "dropdown"];
  
  const renderTableHeader = () => {

    headers.sort((a, b) => {
      if (a.index > b.index) return 1;
      return -1
    });

    const headerView = headers.map((header, index) => {
      let title = header.title;
      let cleanTitle = header.accessor;
      let width = header.width;

      return (
        <th key={cleanTitle + - + index}
            ref={(th) => th = th}
            style={{width:width}}
            data-col={cleanTitle}
         >

         <span className="header-cell" key={index*11}>{title} </span>
         <DynamicFields key={header.index+title} parentIndex={(index + 3) + title} />
       </th>
      );

  } );

    return headerView;
  }

  return(
    <React.Fragment>
     {renderTableHeader()}
    </React.Fragment>
  )
}

返回(
th=th}
样式={{width:width}
数据列={cleanTitle}
>
{title}
);

我已经通读了关于keys和reactjs的文章，然后继续读，但是错误仍然没有停止

下面是呈现datatable时涉及的3个组件：

MyDatatable.js

import React from "react";
import TableHeader from "./TableHeader";

const MyDatatable = (props) => {
  columnHeaders =  [
        {title: "Id" , accessor: 'id' , index: 0},
        {title: "Name" , accessor: 'name', width: "300px", index: 2}
        ]
        
   rowData = [
      {id: 1, name: 'a', age: 29, qualification: 'B.com', rating: 3, profile: 'ps'},
      {id: 2, name: 'b', age: 35, qualification: 'B.Sc', rating: 5, profile: 'h'}
   ]
        
  const [headers, setHeaders] = React.useState(columnHeaders);

  const [data, setData] = React.useState(rowData)
  
  const  renderContent = () => {
    let contentView = data.map((row, rowIdx) => {
    let id = row[keyField];
    let tds = headers.map((header, index) => {
    let content = row[header.accessor];

    return (
      <td key={index} data-id={id} data-row={rowIdx}>
        {content}
      </td>
     );
   });
        
   return (
     <tr key={rowIdx}>
       {tds}
     </tr>
    );
            //
  }); //closes contentView variable

 return contentView;
}

const renderTable = () => {
  let title = props.title || "DataTable";
  let contentView = renderContent();
          
  return (
    <table className="data-inner-table table-responsive">
      <caption className="data-table-caption">
        {title}
      </caption>
      <thead>
        <tr>
          <TableHeader headers={headers} />
        </tr>
      </thead>

      <tbody>
        {contentView}
      </tbody>
    </table>
  )}  

  return (
    <React.Fragment>
      <div className={props.className}>
        {renderTable() }
      </div>
    </React.Fragment>
  )
}

从“React”导入React；
从“/TableHeader”导入TableHeader；
常量MyDatatable=（道具）=>{
列标题=[
{title:“Id”，访问器：'Id'，索引：0}，
{标题：“名称”，访问器：“名称”，宽度：“300px”，索引：2}
]
行数据=[
{id:1，姓名：'a'，年龄：29岁，资格：'B.com'，评级：3，个人资料：'ps'}，
{id:2，姓名：'b'，年龄：35岁，学历：'b.Sc'，等级：5，档案：'h'}
]
const[headers，setHeaders]=React.useState（columnHeaders）；
const[data，setData]=React.useState（rowData）
常量renderContent=（）=>{
让contentView=data.map（（行，rowIdx）=>{
设id=row[keyField]；
设tds=headers.map（（header，index）=>{
let content=行[header.accessor]；
返回(
{content}
);
});
返回(
{tds}
);
//
})；//关闭contentView变量
返回contentView；
}
常量可渲染=（）=>{
让title=props.title | |“数据表”；
让contentView=renderContent（）；
返回(
{title}
{contentView}
)}  
返回(
{renderable（）}
)
}

TableHeader.js

import React from "react";
import DynamicFields from "../DynamicFields";

const TableHeader = (props) => {
  let FieldTypes = ["text", "dropdown"];
  
  const renderTableHeader = () => {

    headers.sort((a, b) => {
      if (a.index > b.index) return 1;
      return -1
    });

    const headerView = headers.map((header, index) => {
      let title = header.title;
      let cleanTitle = header.accessor;
      let width = header.width;

      return (
        <th key={cleanTitle + - + index}
            ref={(th) => th = th}
            style={{width:width}}
            data-col={cleanTitle}
         >

         <span className="header-cell" key={index*11}>{title} </span>
         <DynamicFields key={header.index+title} parentIndex={(index + 3) + title} />
       </th>
      );

  } );

    return headerView;
  }

  return(
    <React.Fragment>
     {renderTableHeader()}
    </React.Fragment>
  )
}

从“React”导入React；
从“./DynamicFields”导入DynamicFields；
const TableHeader=（道具）=>{
让FieldTypes=[“text”，“dropdown”]；
常量renderTableHeader=（）=>{
headers.sort（（a，b）=>{
如果（a.index>b.index）返回1；
返回-1
});
const headerView=headers.map（（header，index）=>{
让title=header.title；
让cleanTitle=header.accessor；
让宽度=页眉宽度；
返回(
th=th}
样式={{width:width}
数据列={cleanTitle}
>
{title}
);
} );
返回headerView；
}
返回(
{renderTableHeader（）}
)
}

DynamicFields.js

import React, { useState, useEffect, useRef } from "react"

const DynamicFields = (props) => {
  const  optionsHash =  ['Checkbox', 'Dropdown', 'boolean', 'Single line text'];

  const [showDynamicField, setShowDynamicField ] = useState(false);

  // const dropdownRef = useRef();
  
  
   const handleShowDynamicField = (event) => {
     setShowDynamicField(!showDynamicField);
   };

  return (
    <React.Fragment>
      <i className="bi bi-chevron-compact-down" onClick={handleShowDynamicField}></i>

     {showDynamicField &&
       optionsHash.map( (val, idx) => {
                return(
                 <li key={val-idx}  value={val} className="dropdown-item"> {val} </li>
                )
       })
     }
    </React.Fragment>
  )
}

import React，{useState，useffect，useRef}来自“React”
常量动态字段=（道具）=>{
常量选项哈希=[“复选框”、“下拉列表”、“布尔值”、“单行文本”]；
const[showDynamicField，setShowDynamicField]=使用状态（false）；
//const dropdownRef=useRef（）；
常量handleShowDynamicField=（事件）=>{
设置showDynamicField（！showDynamicField）；
};
返回(
{showDynamicField&&
选项哈希.map（（val，idx）=>{
返回(
{val}
)
})
}
)
}

-

是减法运算符，这将导致

键={val idx}

（字符串-数字=>NaN）出现问题。
大概您想使用-作为分隔符，所以您应该将其作为字符串使用：

key={val+'-'+idx}

或key={${val}-${idx}}

在本例中，由于

optionsHash

具有所有唯一的字符串，因此只需使用

key={val}

即可

---

之所以

key={cleantTitle+-+index}

有效，是因为它的计算结果是

cleantTitle+（+index）

，在字符串中添加一个负数，这是允许的（但容易混淆）。

key={val idx}

您正在从字符串中减去一个数字，这是NaNThanks，让我检查一下。@Villa7_7添加它作为答案，所以我可以接受。谢谢，接得好。