Question

尝试显示尚未提取的数据时遇到错误，所以..我想显示加载直到数据被提取为止，但是即使将其设置为true，我的'setIsLoading'总是返回false。

我错过了一些明显的东西吗？我很新鲜。

const Pokedex = () => {
  const [data, setData] = useState({});
  const [isLoading, setIsLoading] = useState(false);
  const pokemonId = 1;

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const result = await axios(
        `https://pokeapi.co/api/v2/pokemon/${pokemonId}`
      );

      setData(result.data);
    };

    fetchData();
    setIsLoading(false);
  }, [pokemonId]);

  console.log("loading: ", isLoading);

Answer 1

首先，如果您正在调用异步函数，那么您是在匿名创建Promise<void>，因此在此之后，检查promise是否成功的一种好方法是使用then或catch Promise API 中的方法。

示例解决方案。

const fetchData = async () => {
    setIsLoading(true);
    const result = await axios(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`);

    setData(result.data);
};

fetchData().then(() => {
    setIsLoading(false)
})

Answer 2

获取请求完成后，您需要立即更改isLoading状态。

useEffect(() => {
  const fetchData = async () => {
    const result = await axios(
      `https://pokeapi.co/api/v2/pokemon/${pokemonId}`
    );

    setData(result.data);
    setIsLoading(false);
  };

  fetchData();
}, []);

不要依赖在钩子之外打印东西，因为您不会得到真正的反馈。您可以使用render方法（在返回时使用JSX代码）或在挂钩内使用。

此外，由于刷新组件时状态会重置，因此您可以依靠将isLoading初始化为true。这样，您只需在获取请求后就对其进行更改。

您可以查看有效的演示here。

Answer 3

首先，我认为您的加载状态应初始化为true。

const [isLoading, setIsLoading] = useState(true);

然后，在异步函数中将加载状态设置为false

 useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        `https://pokeapi.co/api/v2/pokemon/${pokemonId}`
      );

      setData(result.data);
      setIsLoading(false);
    };

    fetchData();
  }, [pokemonId]);

反应useState加载未更改

3 个答案: