Javascript 从对象数组中的数组中拾取组件的值

用户拥有自己的标记列表，用户拥有的每个项目都可以从该标记列表中拥有多个标记

在这里，我试图映射一个项目的所有用户标签，如果特定项目具有userTag列表中的标签，那么这些标签芯片元素应该具有不同风格的浅绿色背景

我正在努力寻找一种方法来获取“tag:array”值，并根据多个标记实现芯片元素样式。在这里，我只能获取第一个标记item.tag[0]的item.tag数组。当我试图从itemsData内的嵌套标记数组中获取每个值并为该项提供多个浅绿色标记（如果它有多个标记）时，我该如何处理

{userTags.map（标记=>(
{onTagSelected（tag，item.id）；}
/>
))}

您可以使用来确定它是否在项目的标记数组中

<div>
  {userTags.map(tag => (
    <Chip
      label={tag}
      variant={item.tag.indexOf(tag) > -1 ? 'default' : 'outlined'}
      onClick={() => { onTagSelected(tag, item.id); }}
    />
  ))}
</div>

{userTags.map（标记=>(
-1？'default'：'outlined'}
onClick={（）=>{onTagSelected（tag，item.id）；}
/>
))}

您可以使用来确定它是否在项目的标记数组中

<div>
  {userTags.map(tag => (
    <Chip
      label={tag}
      variant={item.tag.indexOf(tag) > -1 ? 'default' : 'outlined'}
      onClick={() => { onTagSelected(tag, item.id); }}
    />
  ))}
</div>

{userTags.map（标记=>(
-1？'default'：'outlined'}
onClick={（）=>{onTagSelected（tag，item.id）；}
/>
))}

您可以检查某些项目标签是否包含以下标签：

如果您在大型数据集上更频繁地执行该检查，则建立一个集合可能是有益的，那么查找是O（1）：

您可以检查某些项目标记是否包含以下标记：

如果您在大型数据集上更频繁地执行该检查，则建立一个集合可能是有益的，那么查找是O（1）：

试试这个：

 <div>
      {userTags.map(tag => (
        <Chip
          label={tag}
          variant={item.tag.includes(tag) ? 'default' : 'outlined'}
          onClick={() => { onTagSelected(tag, item.id); }}
        />
      ))}
    </div>

{userTags.map（标记=>(
{onTagSelected（tag，item.id）；}
/>
))}

试试这个：

 <div>
      {userTags.map(tag => (
        <Chip
          label={tag}
          variant={item.tag.includes(tag) ? 'default' : 'outlined'}
          onClick={() => { onTagSelected(tag, item.id); }}
        />
      ))}
    </div>

{userTags.map（标记=>(
{onTagSelected（tag，item.id）；}
/>
))}

Set似乎有些过分，因为项目的标记数不是一个大数据集。Set似乎有些过分，因为项目的标记数不是一个大数据集。

 // Build up the Set once
 const highlightedTags = new Set(itemsData.flatMap(item => item.tag));

 // Then lookup:
 highlightedTags.has(tag)

 <div>
      {userTags.map(tag => (
        <Chip
          label={tag}
          variant={item.tag.includes(tag) ? 'default' : 'outlined'}
          onClick={() => { onTagSelected(tag, item.id); }}
        />
      ))}
    </div>