Javascript 状态已被对象填充，但无法访问

我的“口袋妖怪”状态已经填满了我需要的数据，但是，我不能在屏幕上显示它们，它只提供了一个空白的白色屏幕。我错过了什么

这是我的状态变量

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

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

  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>
         );

返回(
{pokemonda.map（（pokemon，index）=>(
{pokemon.name}
{pokemon.types.map（（type）=>{
返回{type.type.name}；
})}
重量
{pokemon.weight}

高度
{pokemon.height}

能力
{pokemon.abilities[0].ability.name}

))}
);

---

尝试条件渲染。我看到你正在跟踪你的加载状态，所以你可以使用它-如果数据没有加载（口袋妖怪被抓取），那么列出你的口袋妖怪。

尝试条件渲染。我看到你正在跟踪你的加载状态，所以你可以使用它-如果数据没有加载（口袋妖怪被抓取），那么列出你的口袋妖怪。

哦，忘了写我的“加载”状态了。。。我试过了，但没用，还是在同一个屏幕上…`退货？（加载…）（（分区…）“``你确定你的样式没有问题吗？在你的开发工具的“元素”选项卡中检查它。必须呈现一些东西。实际上'App'div是完全空的，我的一个好朋友说：问题出在forEach内部，因为即使你写异步，它也充当同步函数，当我在forEach块和loadingPokemon'函数继续运行，不会等待forEach完成其工作。因此，我们尝试了一个for循环，然后等待axios获取，它成功了，我现在将添加答案哦，忘记写入我的“加载”状态…我尝试了，但没有工作，同一屏幕…``返回加载？（加载…（（div…）“``你确定你的样式没有问题吗？在你的开发工具的“元素”选项卡中检查它。必须呈现一些东西。实际上'App'div是完全空的，我的一个好朋友说：问题出在forEach内部，因为即使你写异步，它也充当同步函数，当我在forEach块和加载口袋妖怪的功能继续进行，不会等待forEach完成它的工作。所以我们尝试了一个for循环，然后等待axios获取，它成功了，我现在就添加答案