React / Spring Boot - 如何从对象列表填充数组

Question

我有一个简单的 React/Spring 引导应用程序，我想在其中根据 API 调用的 return 内容填充下拉列表（名称列表，例如“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”函数添加多个语句。错误是说“，”运算符是预期的。如果我添加方括号，错误消息会显示需要 return 值。

如何让它工作？我只需要在应用程序状态中填充 templateOptions。

Answer 1

当 lambda 需要多行或 return 一个对象时，它们必须用 {} 包裹以表示其内容，并使用 return。像这样：

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

调用setState时也需要大括号。

此外，对象内部键周围的 ' 标记也可以，但不需要。排除它们完全一样，只是要编写的代码更少（尽管如果您的密钥不是有效的 javascript 标识符，您仍然需要它们）。

React / Spring Boot - 如何从对象列表填充数组

React / Spring Boot - how to populate array from list of objects

arrays

reactjs

loops

state

spread