0
データセットは：別の配列内のオブジェクトにある配列内の各オブジェクトに一意のキーと線形のキーを割り当てるにはどうすればよいですか？私はこのように構成されて働いている
私のコードを実行した後、私はこの結果を取得しています：
をしかし、私は、オブジェクトを必要とします'キーを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>ありがとう！
各 '{テキスト：}平坦試みるそのグループタイトルプロップを含むように'オブジェクト。または単に 'key = {obj.title + i}'を使って 'Fruits1'、' Fruits2'などを取得してください。 –