javascript - 状态已充满对象但无法访问作为回报

问题描述

我的“pokemonData”状态已经充满了我需要的数据，但是我无法在屏幕上显示它们，它只是给出一个空白的屏幕。我错过了什么？

这是我的状态变量；

const [pokemonData, setPokemonData] = useState([]);
const initialUrl = 'https://pokeapi.co/api/v2/pokemon/';

整个 useEffect 用于首先从“fetchData”获取数据，返回所需的 URL 列表，我必须在“loadingPokemon”中再次获取这些 URL，然后我设置我的 pokemonData 状态。

  useEffect(() => {
   const fetchData = async () => {
   setLoading(true);
   let response = await axios.get(initialUrl);
   setNextUrl(response.next);
   setPrevUrl(response.previous);
    
   await loadingPokemon(response.data.results);
   setLoading(false);
    };
   const loadingPokemon = async (datas) => {
    let pokemonRecords = [];
    let pokemonDatas = [];
    datas.map((data) => {
     pokemonRecords.push(data.url); 
     }); 

    pokemonRecords.forEach(async (record) => {
     let pokemonDatasDatas = await axios.get(record);

    
    pokemonDatas.push(pokemonDatasDatas.data);
    });
  
    setPokemonData(pokemonDatas);
    console.log(pokemonData);
     };

    fetchData();
     }, []);

    console.log(pokemonData);

这也是我的渲染回报；

return (
    <div className='App'>
      {pokemonData.map((pokemon, index) => (
       <div className='Card'>
        <div className='Card__img'>
         <img src={pokemon.sprites.front_default} alt='' />
       </div>
       <div className='Card__Name'>{pokemon.name}</div>
       <div className='Card__types'>
         {pokemon.types.map((type) => {
           return <div className='Card__type'>{type.type.name}</div>;
         })}
       </div>
       <div className='Card__info'>
         <div className='Card__data Card__data--weight'>
           <p className='title'> Weight </p>
           <p> {pokemon.weight} </p>
         </div>
         <div className='Card__data Card__data--height'>
           <p className='title'> Height </p>
           <p> {pokemon.height} </p>
         </div>
         <div className='Card__data Card__data--ability'>
           <p className='title'> Abilities </p>
           <p> {pokemon.abilities[0].ability.name} </p>
         </div>
         </div>
         </div>
          ))}
         </div>
         );

标签： javascriptreactjs

javascript - 状态已充满对象但无法访问作为回报

问题描述

解决方案

推荐阅读