如何 map 具有新键值的新数组中的对象数组

Question

我有一种情况，我有一个这样的对象数组：

[
    {
        "name": "Phone call",
        "value": "Phone call"
    },
    {
        "name": "SMS",
        "value": "SMS"
    },
    {
        "name": "Email",
        "value": "Email"
    }
]

我必须将上述 OBJ 重新映射到一个包含其翻译的新 OBJ，这与 React-intl 中的类似： formatMessage(formatMessage(messages.emailOptionPlaceholder)

想法如下：

if (obj.name === 'Email') formatMessage(formatMessage(messages.emailOptionPlaceholder) else obj.name

所以新数组应该包含正确的翻译，它将填充一个下拉菜单。

到目前为止，我尝试过这样但没有成功：

field.options.map(o => {
        return [
          o.name === 'Email'
            ? formatMessage(messages.emailOptionPlaceholder)
            : o.name,
          o.name === 'Phone call'
            ? formatMessage(messages.phoneOptionPlaceholder)
            : o.name,
          o.name === 'SMS'
            ? formatMessage(messages.smsOptionPlaceholder)
            : o.name,
        ];
      });

这将返回 3 个 arrays 而不是一个具有我需要的值的值。

我的目标是为 object 中的 3 个元素创建一个包含formatMessage(...) output 的数组，作为 output 的示例：

[{
  name: Phone call
  value: <-- Phone call translation from formatMessage --> 
 }
{
  name: Email
  value: <-- Email translation from formatMessage --> 
 }
{
  name: SMS
  value: <-- SMS call translation from formatMessage --> 
 }
]

我从后端获取那个 OBJ，需要将相应名称的翻译放在下拉菜单中，并且想知道什么解决方案可以更好。

Answer 1

Using.map 是一种可能的解决方案，但是您没有正确使用它。 来自 mdn ：

map() 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的 function 的结果。

要修复您的解决方案，您可以使用以下代码：

field.options.map((o) => {
  if (o.name === "Email") {
    return { ...o, value: formatMessage(messages.emailOptionPlaceholder) };
  } else if (o.name === "Phone call") {
    return { ...o, value: formatMessage(messages.phoneOptionPlaceholder) };
  } else if (o.name === "SMS") {
    return { ...o, value: formatMessage(messages.smsOptionPlaceholder) };
  } else {
    return o;
  }
});

注意.map返回一个新数组，所以需要保存结果。 如果您想直接改变对象，请使用简单的 forEach，如下所示：

field.options.forEach(o => {
      if (o.name === "Email") {
        o.value = formatMessage(messages.emailOptionPlaceholder);
      } else if (o.name === "Phone call") {
        o.value = formatMessage(messages.phoneOptionPlaceholder);
      } else if (o.name === "SMS") {
        o.value = formatMessage(messages.smsOptionPlaceholder);
      }
    })

Answer 2

我会这样做。 （未测试）

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

const mapped = field.options.map((obj) => {
    const key = mappings[obj.name]
    if (key) {
        return {
            ...obj,
            value: formatMessages(key)
        }
    } else {
        // no mapping for object name.
        // do something to handle it or just return obj
        return obj
    }
}