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

Question

我正在使用的数据集的结构如下：

运行代码后，我得到以下结果：

但是我需要将“ Dessert”中对象的键设置为3、4、5，而不是在第一次迭代后从0重新循环。

我当前的代码看起来像这样（缩进很抱歉-行为很奇怪）：

 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> 

提前致谢！

Answer 1

容器组件（搜索）可以跟踪所需的索引计数。

 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>