如何使用地图为表格单元格生成唯一ID答案

【问题标题】：how to generate unique id for table cells using map如何使用地图为表格单元格生成唯一ID
【发布时间】：2020-08-14 09:27:27
【问题描述】：

我想为每个菜单项设置一个唯一的 id，但我不知道如何使用嵌套在另一个菜单项中的 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>

【问题讨论】：

标签： javascript html reactjs material-ui jsx

【解决方案1】：

理想情况下，您需要使用一个密钥，该密钥是您的 api 响应中的某种唯一 ID。检查您的 api 响应数据结构，如果它具有唯一的 id，则使用它。否则使用地图数组索引。

像这样

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

【讨论】：

【解决方案2】：

您的问题并不完全清楚，我认为它可能对您有所帮助。

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

【讨论】：

【解决方案3】：

提供的代码对我来说看起来不错。您可以使用uuid 或任何其他类似的包来生成密钥。

【讨论】：