反应将数组元素添加到下拉列表？ [复制]答案

【问题标题】：React adding array elements to dropdown? [duplicate]反应将数组元素添加到下拉列表？ [复制]
【发布时间】：2021-08-15 21:00:19
【问题描述】：

给定一个数组const places = [" a1", "a2", "a3"]; 和

  <FormControl variant="outlined" className={classes.formControl}>
    <InputLabel id="dropdown_label">Testing</InputLabel>
    <Select
      value={5}
      onChange={handleChange}
      label="Testing"
    >
      <MenuItem value={10}> {places[0]} </MenuItem>
      <MenuItem value={20}>{places[1]}</MenuItem>
      <MenuItem value={30}>{places[2]}</MenuItem>
    </Select>
  </FormControl>

当地点大小不一时，我如何才能为地点中的每个值创建 menuItem？

【问题讨论】：

您可以使用Array.map 来渲染所有列表项。检查Lists and keys

标签： javascript arrays reactjs material-ui

【解决方案1】：

您必须在places 数组上使用map 并返回MenuItem 组件。请参见下面的示例。我已经修改了您的代码以使其正常工作。不要忘记将key 属性添加到从map 返回的组件中。

<FormControl variant="outlined" className={classes.formControl}>
  <InputLabel id="dropdown_label">Testing</InputLabel>
  <Select
    value={5}
    onChange={handleChange}
    label="Testing"
  >
  {places.map((place, i) => (
    <MenuItem key={i} value={(i + 1) * 10}>{place}</MenuItem>
  )}
  </Select>
</FormControl>

【讨论】：