在 React 中从数组中填充选择选项答案

【问题标题】：Populate select options from an array in React在 React 中从数组中填充选择选项
【发布时间】：2020-06-24 22:14:19
【问题描述】：

我有这个返回口袋妖怪类型的 API 调用，如下所示：

["Grass", "Poison", "Fire", "Flying", "Water", "Bug", "Normal", "Electric", "Ground", "Fighting", "Psychic", "Rock", "Ice", "Ghost", "Dragon"]

这是一个函数的结果，它获取所有 Pokemon 值并过滤掉重复项等。相同的函数用于获取这些值并填充选择选项：

  let pokemonSingleType = (() => {
    let types = pokemonData.reduce((acc, { type }) => (acc.push(...type), acc), [])
    types = new Set(types);
    types = [...types];
    console.log(types);
    return <option>
      {types}
    </option>
  })();

如下图所示：

 <select value={searchType} onChange={updateSearchByType.bind(this)} 
  className="formcontrol" id="typeSelect">
  {pokemonSingleType}
</select>

问题是我将整个数组作为一个 Select 选项值。请看下图：

输出如下：

此外，当我之前执行 for 循环时，它会在第一次迭代时停止：

let pokemonSingleType = (() => {
    let types = pokemonData.reduce((acc, { type }) => (acc.push(...type), acc), [])
    types = new Set(types);
    types = [...types];
    for(let i =0; i< types.length; i++){
      return <option>
      {types[i]}
    </option>
    }
    
  })();

【问题讨论】：

您的循环停止，因为您在其中使用了 return 语句，而是将选项元素推送到数组中，然后返回它

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

<option> 标签应该放在 each 元素周围，而不是全部。 map 是实现此目的最直接的方法：

const Dropdown = ({options}) =>
  <select>
    {options.map((e, i) => <option key={i}>{e}</option>)}
  </select>
;

const pokemon = ["Grass", "Poison", "Fire", "Flying", "Water", "Bug", "Normal", "Electric", "Ground", "Fighting", "Psychic", "Rock", "Ice", "Ghost", "Dragon"];
ReactDOM.render(<Dropdown options={pokemon} />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

对于第二个示例，循环内的return 将只返回第一个元素。您可以将 JSX 元素推送到数组中并返回，但这似乎仍然是很多间接性。

在这两个示例中，使用reduce 将数组中的每个元素展开到数组累加器上是一种反模式； map 做得最好。

【讨论】：