使用数组呈现选择选项答案

【问题标题】：Use array to render select options使用数组呈现选择选项
【发布时间】：2022-01-12 03:30:28
【问题描述】：

这应该是严格的事情，但即使我尝试了不同的方法并且还参考了 stackoverflow 现有解决方案，我也无法开始工作。我是前端工作的新手。我有反应应用程序（使用打字稿），我正在使用 antd 组件。我有以下对象

class User {
     locations: Location[];
}
class Location {
      name:string;
}

我想在选择选项中呈现位置名称。我试过了

      <Select
            id="location"
            placeholder="Location"
          >
            {user.locations.map((loc) => {
              console.log('got -> ' + loc.name);
              <Option value={loc.name}>{loc.name}</Option>;
            })}
          </Select>

我得到了预期的控制台日志，但没有呈现任何内容（空选项列表）并且没有错误。如何让它工作

【问题讨论】：

一切看起来都不错。您是否在下拉列表中将 user.locations 的数量设为空？
是的。但控制台日志显示所有可用数据。

标签： javascript reactjs typescript antd

【解决方案1】：

你没有从你的 map 函数中返回任何东西，所以它只是在运行并返回 void。由于没有返回任何组件，因此不会渲染任何组件。如果箭头函数中有多行代码，则必须使用显式返回。引用 MDN，(arrow functions do not magically guess what or when you want to "return")

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

【讨论】：

正确。这解决了它。 {user.locations.map((loc) => (;))}