使用数组渲染 select 选项

Question

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

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

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

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

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

Answer 1

您没有 return 从地图函数中获取任何内容，因此它只是运行和 return 无效。由于没有 returned 组件，因此呈现 none。如果箭头函数中有多行代码，则必须使用显式 return。引用 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

使用数组渲染 select 选项

Use array to render select options

javascript

typescript

reactjs

antd