如何为数组中另一个数组中的对象中的每个对象分配唯一键和线性键？

Question

The dataset that I'm working with is structured like this:

After running my code, I'm getting this result:

But I need the objects' keys in the "Dessert" to be 3, 4, 5 instead of relooping from 0 after the first iteration.

My current code looks like this (sorry for the indentation- it's acting weird):

 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> {this.props.text} </div> ); } } class Result extends React.Component{ render(){ return( <table> <tbody> <tr><td>Name:</td><td> {this.props.text} </td></tr> <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> 

Thanks in advance!

Answer 1

The container component (Search) can track the index counting you want.

 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> {this.props.text} </div> ); } } class Result extends React.Component{ render(){ return( <table> <tbody> <tr><td>Name:</td><td> {this.props.text} </td></tr> <tr><td>Key:</td><td> {this.props.keyz} </td></tr> </tbody> </table> ); } } class Search extends React.Component{ render(){ var database = this.props.database; var totalIndex = 0; 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={totalIndex++} /> </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>