как создать уникальный идентификатор для ячеек таблицы, используя карту

Question

Я хочу установить уникальный идентификатор для каждого MenuItem, но я не знаю, как это сделать с помощью функции map (), вложенной в другую

<table className={classes.table}>
  <thead>
    <tr>
      <td />
      {sit.sit.map(sit => (
        <td className={classes.sitCell} align="center" key={sit}>
          {sit}
        </td>
      ))}
    </tr>
  </thead>
  <tbody>
    {sit.row.map(row => (
      <tr key={row}>
        <td className={classes.rowCell} align="left">
          {row}
        </td>
        {sit.sit.map(sit => (
          <td className={classes.sit} key={(id = id + 1)}>
            <MenuItem
              id={sitId}
              onClick={handleSitClick}
              disabled={selected}
              className={classes.sit}
            />
          </td>
        ))}
      </tr>
    ))}
  </tbody>
</table>

Answer 1

Ваш вопрос не полностью ясен, я думаю, что он может помочь вам.

    <table className={classes.table }>
            <thead>
                <tr>
                    <td></td>
                    { 
                        sit.sit.map((sit) => (<td className={classes.sitCell} align='center' key={sit}>{sit}</td>))
                    }
                </tr>
            </thead>
            <tbody>
            {
                sit.row.map((row,index )=> (
                    <tr key={index}>
                        <td className={classes.rowCell} align='left'>{row}</td>
                        {   
                            sit.sit.map((sit) => (<td className={classes.sit} key={id = id+1}><MenuItem id={sitId} onClick={handleSitClick} disabled={selected} className={classes.sit}></MenuItem></td>))
                        }
                    </tr>
                ))
            }
            </tbody>
        </table>

Вы можете просто добавить (row,index) вот так

Answer 2

В идеале вам нужно использовать ключ, который является своего рода уникальным идентификатором из вашего ответа API. Проверьте свою структуру данных ответа API, если она имеет уникальный идентификатор, а затем используйте его. Еще используйте индекс массива карты.

Как это

<table className={classes.table}>
    <thead>
        <tr>
            <td></td>
            {
                sit.sit.map((sit) => (<td className={classes.sitCell} align='center' key={sit}>{sit}</td>))
            }
        </tr>
    </thead>
    <tbody>
        {
            sit.row.map(row => (
                <tr key={row}>
                    <td className={classes.rowCell} align='left'>{row}</td>
                    {
                        sit.sit.map((sit, index) => (<td className={classes.sit} key={index}><MenuItem id={index} onClick={handleSitClick} disabled={selected} className={classes.sit}></MenuItem></td>))
                    }
                </tr>
            ))
        }
    </tbody>
</table>

Answer 3

Предоставленный код выглядит хорошо для меня. Вы можете использовать uuid или любой другой подобный пакет для генерации ключей.