Javascript 如何在pokeAPI中获取有关口袋妖怪的详细信息

我最近开始学习如何反应。我正在用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>
        ))}

{口袋妖怪&&
Pokemon.map（（类型，id）=>(
{types.type.name}
))}

我不知道问题出在哪里，但它抛出了一个错误

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

未捕获类型错误：无法读取未定义的属性“type”
在GridCards.js:50
at Array.map(

应设置口袋妖怪：[结果.类型]

应该将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>
        ))}

{口袋妖怪&&
Pokemon.map（（类型，id）=>(
{type.name}
))}

应该迭代并映射每个类型。
从结果结构中，很明显，
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>
  ))
}

{
口袋妖怪&&
Pokemon.map（（类型，id）=>(
{
types.map（（currType，typeId）=>（
{currType.type.name}
))
}
))
}
console.log（result.results）

的值是多少？@AnuragSrivastava hmmmm，12未定义

类型的值是多少？
类型的值是多少？你能防止它未定义吗？我打赌，
{types.type.name}
对你来说是失败的。那么
console.log（result）呢
然后呢？也许您在响应中选择了错误的属性？（您也可以通过过滤“XHR”（AJAX/fetch请求的旧术语）在浏览器DevTools的网络选项卡中检查响应）。@AnuragSrivastava I更改为“结果”，我得到了详细信息的对象，但这不适用于显示，虽然这段代码可能会解决这个问题，如何以及为什么解决这个问题会真正有助于提高您的帖子质量，并可能导致更多的投票。请记住，您是在将来为读者回答这个问题，而不仅仅是现在提问的人。请您的回答添加解释，并说明哪些限制和假设适用。它对我不起作用。它说，
TypeError:无法读取未定义的属性“map”
@Valeriy Samoilov您在控制台.log（Pokemon）时得到相同的值吗？如果您对上述代码段有任何疑问，请不要犹豫。@Dharman谢谢，我会记住这一点，我会继续更新，以帮助提供解决方案。我会在获得更多信息时更新我的答案。@DcoderZ如果我是console.log（…Pokemon），这是相同的值。
{ 
  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>
  ))
}