Как получить подробную информацию о покемонах в pokeAPI - PullRequest
Новая
       4

Как получить подробную информацию о покемонах в pokeAPI

2 голосов
/ 05 апреля 2020

Я недавно начал учиться реагировать. Я делаю приложение pokedex с pokeAPI. На карте мне нужно указать тип каждого покемона. Ниже приведен пример того, как я получаю и сохраняю данные о покемонах. 

 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

Если I console.log(result) или console.log(...Pokemon), консоль показывает этот результат

console.log (результат)

Ответы [ 2 ]

1 голос
/ 05 апреля 2020

Из структуры результатов ясно, что 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>
  ))
}
0 голосов
/ 05 апреля 2020 
setPokemon([...Pokemon, result.types]);

должен установить Pokemon: [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>
        ))}

должен повторяться и отображать каждый тип.

...