无法在下拉列表中生成口袋妖怪名称答案

【问题标题】：Cannot Generate Pokemon names in Dropdown List无法在下拉列表中生成口袋妖怪名称
【发布时间】：2021-03-12 04:26:41
【问题描述】：

所以我正在重新访问一个我不得不放弃的旧训练营项目，因为我离截止日期太近并且没有取得足够的进展。

使用 Pokemon API：我只是尝试创建一个下拉组件（通过 react-bootstrap 下拉组件）来生成从 API 获取的 Pokemon 名称列表。下拉列表似乎生成了适量的条目，但名称实际上并未显示在下拉列表中。

import { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';
import Dropdown from 'react-bootstrap/Dropdown';
// import PokemonList from './components/PokemonList';

function App() {
  
  // Axios fetch call
  const url = 'https://pokeapi.co/api/v2/pokemon';
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    axios.get(url)
    .then(response => {
      setPokemons(response.data.results)
      console.log(response.data.results)
    });
  }, []);

  return (
    <div className="App">
      <Dropdown>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
          <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
          <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      <br />
      <Dropdown>
          <Dropdown.Toggle variant="success" id="dropdown-basic">
            List of Pokemon
          </Dropdown.Toggle>
          
          <Dropdown.Menu>
            {pokemons.map((pokemon => {
              return <Dropdown.Item href="#" key={pokemon}>{pokemons.name}</Dropdown.Item>
              }))}
          </Dropdown.Menu>
      </Dropdown>
      {/* <PokemonList pokemons={pokemons} /> */}
    </div>
  );
}

export default App;

【问题讨论】：

{pokemons.name} 应该是 {pokemon.name}。
好像你使用了错误的变量，它应该是 pokemon.name 而不是 pokemons.name
sigh 谢谢....就是这样。

标签： reactjs axios react-bootstrap array.prototype.map pokeapi

【解决方案1】：

将变量更改为正确的变量，但也继续构建更多代码以将每个名称的第一个字母大写：

{pokemons.map((pokemon => {
    return <Dropdown.Item href="#" key={pokemon}>{pokemon.name[0].toUpperCase() + pokemon.name.substring(1)}</Dropdown.Item>
              }))}

【讨论】：

【解决方案2】：

只是代码中的一些错误。第一个是最明显的，您正在尝试从 pokemons 访问属性 name，而不是您正在映射的 pokemon。

<Dropdown.Menu>
            {pokemons && pokemons.map((pokemon,idx) => {
              const name = pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1);
              return <Dropdown.Item eventkey={idx} key={idx}>{name}</Dropdown.Item>
              })}
</Dropdown.Menu>

然后您还将初始状态设置为空数组，但您可以将其留空，因为您已经将状态设置为对象数组。

const [pokemons, setPokemons] = useState();

输出：

Link to working Code Sandbox

【讨论】：