如何在React多选组件中可靠更新选中标签值？

基础可靠实现 #

直接从dummyTags中筛选出value存在于数据库返回的groupTags中的标签对象，不管label和value是否一致，都能拿到正确的完整标签结构：

// groupTags 为数据库返回的标签value数组，如 ['Test 1','Test 2']
const newtags = dummyTags.filter(tag => groupTags.includes(tag.value));

性能优化版（标签数量较多时） #

如果dummyTags的数量很大，每次filter遍历全数组的效率会偏低，可以先构建一个以value为键的映射表，再快速匹配：

// 先构建value到完整标签对象的映射Map
const tagValueMap = new Map(dummyTags.map(tag => [tag.value, tag]));

// 遍历groupTags，取出对应标签对象，同时过滤掉数据库返回的无效value（避免出现undefined）
const newtags = groupTags.map(value => tagValueMap.get(value)).filter(Boolean);

原方案的问题 #

原方案直接将groupTags中的value同时作为label和value赋值，一旦dummyTags里存在label与value不一致的标签（比如{label: "中文标签", value: "cn_tag"}），生成的标签对象就会和源数据不符。而上面的两种方案都是直接从dummyTags中取原始的完整对象，完全保证标签结构的正确性。

内容的提问来源于stack exchange，提问作者Mofoluwasho Kolawole Jimoh