Как в React можно использовать «карту» для преобразования массива объектов в новый массив объектов?

Question

У меня простой вопрос по поводу моего React 16.10.0. Как мне преобразовать свой массив в другой массив объектов? У меня есть массив объектов с атрибутами

id
name

И я хочу преобразовать этот массив в другой массив с атрибутами

id
text

Итак, я попробовал

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
     
    const tags = props.values.map(result => 
      {
        id: result.id,
        text: result.name
      });

но компилятор жалуется на ";" ожидается в строке «текст:».

Answer 1

Javascript интерпретирует { ... } как блок кода вместо литерала объекта. Простой способ обойти это - просто добавить вокруг объекта круглые скобки, как показано ниже:

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        const tags = props.values.map(result => 
            ({
                id: result.id,
                text: result.name
            }));

Answer 2

Я думаю, вы запутались из-за подразумеваемого return не работает при возврате объекта.

Есть два способа вернуться из стрелочной функции:

Явный возврат (блок body)

() => {
  return 'something';
}

или неявный возврат (краткое тело)

() => 'something';
() => ('something')

Вы пытаетесь использовать неявный возврат, но вы возвращаете объект, поэтому синтаксис конфликтует с вашим ожидание.

result => 
{
  id: result.id,
  text: result.name
});

Это не объект, а тело функции. В теле функции указан недопустимый синтаксис, приводящий к ошибке.

Вы можете исправить это, используя круглые скобки или вернув вручную:

result => 
({
  id: result.id,
  text: result.name
};

result => {
  return {
    id: result.id,
    text: result.name
}};

Для справки: ознакомьтесь с разделом " Возвращение объектных литералов »в документации для стрелочных функций ,