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

【问题标题】：React / Spring Boot - how to populate array from list of objectsReact / Spring Boot - 如何从对象列表中填充数组
【发布时间】：2020-10-11 01:49:58
【问题描述】：

我有一个简单的 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。

【问题讨论】：

您似乎在这里犯错的主要事情之一是.map() 将根据您从其回调返回的内容为您构建一个新数组。您在这里所做的是在您的 .map() 方法之外构建一个数组，然后使用 .map() 迭代您的 templateOptionsTemp 数组 - 仅用于迭代 .forEach() 更适合于此。相反，您可以在映射回调中返回 obj 以将其“推送”到为您构建的新数组映射，并将新数组保存在变量中（例如：yeerk 在 their answer 中执行此操作）

标签： arrays reactjs loops state spread

【解决方案1】：

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

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

调用 setState 时也需要大括号。

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

【讨论】：

不错的答案。我有点破解了它，但我终于（有点）看到它应该如何工作。