如何在 pokeAPI 中获取有关 pokemon 的详细信息

Posted 2023-02-22

【中文标题】如何在 pokeAPI 中获取有关 pokemon 的详细信息

【英文标题】：How to get details info about pokemons in pokeAPI

【发布时间】：2020-07-16 23:25:49

【问题描述】：

我最近开始学习 React。我正在用 pokeAPI 制作一个 pokedex 应用程序。 在卡片上，我需要获取每个口袋妖怪的类型。下面是我如何获取和保存口袋妖怪数据的示例。

 useEffect(() => 
    const endpointForPokemonInfo = `$pokemonUrl`;
    fetchPokemon(endpointForPokemonInfo); // eslint-disable-next-line
  , []);

  const fetchPokemon = endpointForPokemonInfo => 
    fetch(endpointForPokemonInfo)
      .then(result => result.json())
      .then(result => 
        setPokemon([...Pokemon, result.results]);
      , setLoadingForPokemon(false))
      .catch(error => console.error("Error:", error));
  ;

这是我如何显示口袋妖怪类型的示例。

      Pokemon &&
        Pokemon.map((types, id) => (
          <React.Fragment key=id>
            <div
              style=
                color: "#333",
                padding: 5,
                maxWidth: 100,
                display: "inline-block"
              
            >
              types.type.name
            </div>
          </React.Fragment>
        ))

我不知道问题是什么，但它会引发错误。

Uncaught TypeError: Cannot read property 'type' of undefined
    at GridCards.js:50
    at Array.map (<anonymous>)
    at GridCards (GridCards.js:46)
    at renderWithHooks (react-dom.development.js:14803)
    at updateFunctionComponent (react-dom.development.js:17034)
    at beginWork (react-dom.development.js:18610)
    at htmlUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
    at GridCards.js:23

如果我console.log(result) 或console.log(...Pokemon)，控制台会显示这个结果

console.log(result)

【问题讨论】：

console.log(result.results) 的值是多少？

@AnuragSrivastava 嗯，12 个未定义

types 的值是多少？你能防止这是未定义的吗？我敢打赌，types.type.name 对你来说是失败的。

那么console.log(result) 呢？也许您在响应中选择了错误的属性？ （您还可以通过过滤“XHR”（AJAX/获取请求的旧术语）来检查浏览器 DevTools 的网络选项卡中的响应。

@AnuragSrivastava 我改成了“结果”，我得到了详细信息的对象，但这不起作用

【参考方案1】：

从结果结构中可以看出Pokemon.types也是一个数组，所以需要再次使用.map()：

 
  Pokemon &&
  Pokemon.map((types, id) => (
    <React.Fragment key=id>
      
        types.map((currType, typeId) => (        
          <div
            key=typeId
            style=
              color: "#333",
              padding: 5,
              maxWidth: 100,
              display: "inline-block"
            
          >
            currType.type.name
          </div>
        ))
      
    </React.Fragment>
  ))

【参考方案2】：

setPokemon([...Pokemon, result.types]);

应该设置口袋妖怪：[result.types]

应该将 Pokemon 设置为数组 result.types

您必须像以前一样使用 map 函数进行迭代

Pokemon &&
        Pokemon.map((types, id) => (

          <React.Fragment key=id>
            <div
              style=
                color: "#333",
                padding: 5,
                maxWidth: 100,
                display: "inline-block"
              
            >
              type.name
            </div>
          </React.Fragment>
        ))

应该迭代和映射每种类型。

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。

它对我不起作用。它说，TypeError: Cannot read property 'map' of undefined

@Valeriy Samoilov 你在 console.log(Pokemon) 时得到相同的值吗？如果您对上述代码 sn -p 有任何疑问，请不要犹豫。

@Dharman 谢谢，我会记住这一点，我会继续更新以帮助提供解决方案。当我获得更多信息时，我会更新我的答案。

@DcoderZ 如果我使用 console.log(...Pokemon)，那是相同的值。