Question

我的“ 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>
         );

Answer 1

尝试条件渲染。我看到您正在跟踪加载状态，因此可以使用它-如果数据未加载（已提取宠物小精灵），请列出您的宠物小精灵。

状态已充满对象，但无法访问

1 个答案: