React.js 如何通过对象数组为多选select设置选中option

问题原因 #

• 嵌套map逻辑错误：外层遍历data、内层遍历selected的写法，会导致每条data数据生成和selected长度一致的重复option，且外层map没有返回值，最终没有元素渲染。
• 用name字段判断选中状态存在风险，重名场景会出现匹配错误，推荐用唯一主键id做匹配。

最佳实现方案 #

先将选中项的唯一标识id提取为Set，将匹配的时间复杂度从O(n)降低到O(1)，性能更好，逻辑也更清晰：

// 预处理选中项id，方便快速查找
const selectedIdSet = new Set(selected.map(item => item.id))

渲染代码如下：

<select multiple={true}>
  {data.map((creator, index) => (
    <option 
      key={index}
      value={creator.id}
      selected={selectedIdSet.has(creator.id)}
    >
      {creator.name}
    </option>
  ))}
</select>

如果是React等支持受控组件的框架场景，更推荐直接给select绑定value属性，不需要手动给option设置selected：

// React 受控组件写法
const selectedIds = selected.map(item => item.id)

// 下拉框change事件处理示例
const handleChange = (e) => {
  const newSelectedIds = Array.from(e.target.selectedOptions).map(opt => Number(opt.value))
  // 后续更新selected数组的逻辑
}

<select multiple={true} value={selectedIds} onChange={handleChange}>
  {data.map((creator, index) => (
    <option 
      key={index}
      value={creator.id}
    >
      {creator.name}
    </option>
  ))}
</select>

内容的提问来源于stack exchange，提问作者Jack The Baker