如何映射对象数组生成带React-intl翻译值的新数组适配下拉菜单

你当前写法的问题出在map回调的返回值类型错误：每一次遍历原数组的单个选项时，你都返回了包含3个翻译结果的数组，最终得到的就是嵌套三层的数组结构，和你需要的对象数组格式不符。

推荐用映射表替换多分支三目判断，可维护性更高，后续新增选项只需要更新映射表即可：

1. 先定义选项名称和对应翻译词条的映射关系

const optionMessageMap = {
  'Email': messages.emailOptionPlaceholder,
  'Phone call': messages.phoneOptionPlaceholder,
  'SMS': messages.smsOptionPlaceholder
}

2. 遍历原数组生成符合要求的翻译后选项数组

const translatedOptions = field.options.map(option => {
  const translatedValue = optionMessageMap[option.name] 
    ? formatMessage(optionMessageMap[option.name])
    : option.name
  return {
    name: option.name,
    value: translatedValue
  }
})

生成的translatedOptions就是符合你预期的下拉菜单填充数组格式。

内容的提问来源于stack exchange，提问作者Jakub