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

Question

我最近开始学习 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)

Answer 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>
  ))
}

Answer 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>
        ))}

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