我有这个 API 调用，它返回 Pokemon 的类型，如下所示：

["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>
    }
    
  })();