Question

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

Answer 1

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

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

调用setState时也需要大括号。

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

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

1 个答案: