0
是我与结构像这样的工作数据集：如何为位于另一个数组内的对象内的数组中的每个对象分配唯一线性键？
运行我的代码后，我得到这样的结果：
但我需要的对象'Dessert'中的键为3,4,5，而不是在第一次迭代之后从0重新展开。
我当前的代码看起来像这样（抱歉indentation-它的行事怪异）：
const groupSource = [
{
title: 'Fruits',
group: [
{text: 'apple'},
{text: 'banana'},
{text: 'grapefruit'}
],
},
{
title: 'Desserts',
group: [
{text: 'icecream', color: 'orange'},
{text: 'chocolate'},
{text: 'chips'}
],
}
];
class ResultCategory extends React.Component{
render(){
return(
<div>
\t \t \t \t \t {this.props.text} \t
</div>
);
}
}
class Result extends React.Component{
render(){
return(
<table>
\t <tbody>
\t \t \t \t \t \t <tr><td>Name:</td><td> {this.props.text} </td></tr>
\t \t \t \t \t \t <tr><td>Key:</td><td> {this.props.keyz} </td></tr> </tbody>
</table>
);
}
}
class Search extends React.Component{
render(){
var database = this.props.database;
var ResultsDisplay = database.map((object, index) => {
return(
<div>
<div className="Category">
<ResultCategory
text={object.title}
/>
</div>
{object.group.map((item, index)=>{
return(
<li className="results" onClick={this.onClick}>
<Result
text={item.text}
keyz={index}
/>
</li>
);
})}
</div>
);
});
return(
<div>
{ResultsDisplay}
</div>
);
}
}
ReactDOM.render(
<Search database={groupSource} />,
document.getElementById('container')
);*{
font-family: Helvetica;
font-weight: 100;
}
li{
list-style: none;
}
.Category{
margin-top: 20px;
margin-bottom: 5px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>提前感谢！
尝试压扁每个'{文字：}'对象包括它的组标题道具。或在反应只是使用'键= {obj.title +我}'所以你得到'Fruits1'，'Fruits2'等 –