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>
);
我已经阅读了有关 keys 和 reactjs 的讨论 ,并遵循了它,但错误仍然没有停止。
以下是渲染数据表所涉及的 3 个组件:
MyDatatable.jsimport 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>
)
}
表头.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>
)
}
动态字段.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>
)
}
解决方案
-
是减法运算符,这将导致key={val-idx}
(string - number => NaN) 出现问题。
大概您想使用 - 作为分隔符,因此您将其用作字符串:key={val + '-' + idx}
或 key={`${val}-${idx}`}
在这种情况下,由于optionsHash
具有所有唯一字符串,您可以只使用key={val}
.
起作用的原因key={cleanTitle + - + index}
是因为它评估为cleanTitle + (- +index)
,将负数添加到允许的字符串(但令人困惑)。
推荐阅读
- ms-access - 如何在 Sharepoint 上共享 MS Access 前端 - 网络驱动器上的后端
- webrtc - WebRTC 信号成功,但没有视频通过
- php - Laravel 路由模型绑定与排序的急切加载?
- laravel - 我想在 laravel 中用 is_dir() 区分子文件夹和文件
- python - 对于 placequeen 功能,board.append 和 board.remove 是如何工作的?
- azure-devops - azure devop yaml 如何确定它应该签出的源代码分支?
- node.js - 发布 React Web 应用
- python - 使用 pip 升级依赖项的依赖项
- c# - C#获取Action中指定的属性类型
- postgresql - 为什么行级安全性 (RLS) 不使用索引?