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

Question

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

运行我的代码后，我得到了这个结果：

但我需要将“甜点”中的对象键设置为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

容器组件（搜索）可以跟踪您想要的索引计数。

＆＃13;

＆＃13;

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')
);

＆＃13;

*{
  font-family: Helvetica;
  font-weight: 100;
  
}

li{
  list-style: none;
}
.Category{
  margin-top: 20px;
  margin-bottom: 5px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;