我有一个生成行和标题的表组件,虽然我认为我在每个 tr 元素上都有一个唯一的键,但警告仍然出现。我已经阅读了其他一些具有相同问题的问题,但仍然无法得出答案......如果有人可以帮助我解决这个问题,我将不胜感激。
这是有问题的代码:
render: function() {
var headerComponents = this.generateHeaders(),
rowComponents = this.generateRows();
return (
<table>
<thead>{headerComponents}</thead>
<ReactCSSTransitionGroup transitionName="fade" transitionEnterTimeout={500} transitionLeaveTimeout={300} transitionAppearTimeout={500} transitionAppear={true} component="tbody">
{rowComponents}
</ReactCSSTransitionGroup>
</table>
);
},
generateHeaders: function() {
var cols = this.props.cols; // [{key, label}]
// generate our header (th) cell components
return cols.map(function(colData) {
return <th key={colData.key}>{colData.label}</th>;
});
},
generateRows: function() {
var cols = this.props.cols, // [{key, label}]
data = this.props.data;
var propsRound = this.props.round;
var round=1;
var pairNo=1;
var oldRound=0;
var teamName=null;
var first=true;
var delay=100;
return this.state.data.map(function(item, i) {
var htmlExcerpt = null;
var len = Object.keys(cols).length;
if (oldRound !== item.round) {
htmlExcerpt = <tr key={'round'+item.round} style={{ 'transition-delay': `${i * delay}ms` }}><td colSpan={len}>Round: {item.round}</td></tr>;
oldRound = item.round;
}
var cells = cols.map(function(colData) {
if (colData.key == "pairNo") {
return (<td> {i+1} </td>);
} else {
if (colData.key == "homeTeam" || colData.key == "awayTeam") {
teamName = config.teams[item[colData.key]].name;
return (<td> {teamName} </td>);
} else {
return (<td> {item[colData.key]} </td>);
}
}
});
if (htmlExcerpt !== null) {
return [htmlExcerpt,<tr key={'round'+item.round+'_'+item.pairNo} style={{ 'transition-delay': `${i * delay}ms` }}>{cells}</tr>];
} else {
return <tr key={'round'+item.round+'_'+item.pairNo} style={{ 'transition-delay': `${i * delay}ms` }}>{cells}</tr>;
}
pairNo=pairNo+1;
});
我相信每个 tr 都有不同的 key ,但仍然会出现警告...
警告堆栈:
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `exports`.
in td (created by exports)
in exportswarning @ app.js:23941validateExplicitKey @ app.js:13818validateChildKeys @ app.js:13838createElement @ app.js:13906(anonymous function) @ app.js:24284generateRows @ app.js:24237exports_render @ app.js:24193_renderValidatedComponentWithoutOwnerOrContext @ app.js:9520_renderValidatedComponent @ app.js:9547performInitialMount @ app.js:9071mountComponent @ app.js:8950mountComponent @ app.js:16707performInitialMount @ app.js:9085mountComponent @ app.js:8950mountComponent @ app.js:16707mountComponentIntoNode @ app.js:14824perform @ app.js:20206batchedMountComponentIntoNode @ app.js:14845perform @ app.js:20206batchedUpdates @ app.js:13268batchedUpdates @ app.js:17911_renderNewRootComponent @ app.js:15004_renderSubtreeIntoContainer @ app.js:15090render @ app.js:15111194../StartButton @ app.js:24423s @ app.js:1e @ app.js:1(anonymous function) @ app.js:1
有问题的表的 React 开发者工具...
最佳答案
如果您粘贴了警告堆栈,那就太好了,但是从我在您的代码中看到的,请尝试将 key 放在那里
var cells = cols.map(function(colData) {
if (colData.key == "pairNo") {
return (<td key={'someKey}> {i+1} </td>);
} else {
if (colData.key == "homeTeam" || colData.key == "awayTeam") {
teamName = config.teams[item[colData.key]].name;
return (<td key={'someKey}> {teamName} </td>);
} else {
return (<td key={'someKey}> {item[colData.key]} </td>);
}
}
});
https://stackoverflow.com/questions/38867467/