如何為數組中另一個數組中的對象中的每個對象分配唯一鍵和線性鍵？

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>