Заполните значение индекса в столбце из данных в машинописи (Angular / React)

Question

У меня есть массив ниже. Я попытался заполнить таблицу ниже в формате. Первое поле ранжируется, тогда имя игрока должно по одному из нуля массива.

0:Array(3)
    0:{fullname:'john'}
    1:{fullname:'kennedy'}
    2:{fullname:'sachin'}
1:Array(3)
    0:{fullname:'dravid'}
    1:{fullname:'dhoni'}
    2:{fullname:'kohli'}
2:Array(3)
    0:{fullname:'mcrath'}
    1:{fullname:'murali'}
    2:{fullname:'dinesh'}

My код ниже. он не работает. Столбец рейтинга не отображается правильно Столбец рейтинга должен автоматически увеличиваться с 1.

 {this.props.data.map((row, index) => { 
     return ( 
          <tr>
               {row.map((col, colIndex) => { 
                     return (  
                         <td> {col.index} </td> 
                         <td> {col.fullname} </td> 
                     )
                 })}
          </tr>
      ) 
 })}

Answer 1

Вы должны использовать внешнюю карту index, и, поскольку индексы начинаются с 0, вы должны добавить 1, чтобы сделать ее в соответствии с вашими потребностями:

<td> {index+1} </td> 

Answer 2

Попробуйте это

this.props.data.map((row, index) => (
    <tr key={index}>
        <td> {index + 1} </td>
        {row.map((col, colIndex) => (
            <td key={colIndex}> {col.fullname} </td>
        ))}
    </tr>
));