從對象數組中的數組中選取Component的值

Question

用戶具有自己的標簽列表，並且用戶擁有的每個項目都可以從該標簽列表中包含多個標簽。

在這里，我嘗試映射一個項目的所有用戶標簽，如果特定項目具有userTag列表中的標簽，則這些標簽Chip元素應具有不同的樣式淺綠色背景。

我正在努力尋找一種獲取“標簽：數組”值的方法，並相應地對多個標簽實施Chip元素樣式。 在這里，我只能獲取第一個標簽item.tag [0]的item.tag數組。 嘗試從itemsData內的嵌套標簽數組獲取每個值並為該項目提供多個淺綠色標簽（如果它具有多個標簽）時，我將如何處理。

 const itemsData = [
 { id: 1, tag: ['Fysik', 'Matematik'] },
 { id: 2, tag: ['Analytics', 'Marketing', 'Data'] },
 { id: 3, tag: [''] },
 ];

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

Answer 1

您可以使用Array.indexOf來確定它是否在項目的標簽數組中。

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

Answer 2

您可以檢查某些項目標簽是否包含標簽：

 itemsData.some(item => item.tag.includes(tag))

如果您在大型數據集上更頻繁地進行檢查，則建立一個Set可能是有益的，則查找值為O（1）：

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

 // Then lookup:
 highlightedTags.has(tag)

Answer 3

嘗試這個：

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