React / Spring Boot - как заполнить массив из списка объектов - PullRequest
Новая
       166

React / Spring Boot - как заполнить массив из списка объектов

1 голос
/ 21 июня 2020

У меня есть простое приложение React / Spring Boot, в котором я хочу заполнить раскрывающийся список на основе того, что возвращается из вызова API (список имен, например, «o1», «o2», «o3»).

Он может получать и перечислять имена следующим образом: 

const templateOptionsTemp = await (await fetch(API_HOST + `/api/templates/`, {
  credentials: 'include'
})).json();

templateOptionsTemp.map((templateName) =>
  console.log("templateName: " + templateName)
);

Теперь мне просто нужно создать объект json на основе имени, которое выглядит следующим образом: 

{ key: 'o1', text: 'opt 1', value: 'o1'}

и добавьте его в массив, который будет использоваться в качестве раскрывающегося списка, который сейчас выглядит следующим образом: 

const templateOptions = [
  { key: 'o1', text: 'opt 1', value: 'o1' },
  { key: 'o2', text: 'opt 2', value: 'o2' },
  { key: 'o3', text: 'opt 3', value: 'o3' },
]

Таким образом, код должен быть примерно таким: 

const tempArray = []
templateOptionsTemp.map((templateName) =>
  const obj = {
    'key': templateName,
    'value': templateName,
    'text': templateName
  }
  templateOptionsTemp.push(obj);
);

this.setState(templateOptions: tempArray);

Но я получаю синтаксическую ошибку в приведенном выше коде - очевидно, вы не можете добавить более одного оператора к функции «map». Ошибка говорит, что ожидается оператор ",". Если я добавлю скобки, в сообщении об ошибке будет указано, что ожидается возвращаемое значение.

Как мне заставить это работать? Мне просто нужно заполнить templateOptions в состоянии приложения.

1 Ответ

2 голосов
/ 21 июня 2020

Когда лямбда-выражения требуют нескольких строк или возвращают объект, они должны быть заключены в {} для обозначения их содержимого и использовать return. Примерно так: 

const tempArray = templateOptionsTemp.map((templateName) => {
    return { key: templateName, value: templateName, text: templateName };
});
this.setState({templateOptions: tempArray});

Фигурные скобки также необходимы при вызове setState.

Также отметки ' вокруг клавиш внутри вашего объекта подходят, но не нужны. Исключить их - то же самое, только меньше кода для написания (хотя они все равно понадобятся, если ваши ключи недействительны javascript идентификаторы).

...