Axios 在第一次加载时没有得到响应

Question

我是 React JS 的新手，并试图在 useEffect 中获取数据，并且我的 api 有一个单独的函数，但是当我在 console.log 中检查 data.next 时，第一次加载但添加后没有数据很少更改它可以正常工作，但是当我刷新页面时仍然有错误。另外，我注意到当我尝试在 Axios 或 api 声明的函数内部执行 console.log 时，在应用程序的第一次加载中已经有一个数据。有人遇到过这个问题吗？还是我的方法不对？

这是我的代码 /src/App.js

useEffect(async () => {
    const res = await service.apiPokemon.fetchAll();
    console.log(res.data.next)
}, []);

/src/api/pokemon.js

import axios from 'axios';
const URL = 'https://pokeapi.co/api/v2/pokemon';

export const fetchAll = async () => {
    try {
        const res = await axios.get(URL);
        console.log(res.data.next);
        
        return res;
    } catch (error) {
        console.log(error);
    };
};

Answer 1

这是一个很常见的问题。在获取数据之前加载您的内容。为了解决这个问题，您可以添加一个条件，在您获取数据之前不渲染您的内容：

  let [pokemonsList, setPokemonsList] = useState([])

  // Your useEffect hook to fetch data on mount

  return (
    { pokemonsList.lenght > 0 && // If you are sure you'll receive pokemons
      <div> {pokemonList.map((pokemon) => (
         <p> {pokemon.name} </p>
      )} </div>
    }
  )

现在，您只有在获得列表后才能看到宠物小精灵的名称。 您还可以添加加载消息，以防 Redux 和选择器响应需要时间。