时间戳

首页 > 解决方案 > 为什么 React Hooks Axios API 调用会返回两次？

reactjs - 为什么 React Hooks Axios API 调用会返回两次？

问题描述

为什么 React Hooks Axios API 调用会返回两次.. 即使检查它是否已加载？

我已经习惯了 this.setState ，但我试图理解为什么它在我的控制台日志中出现两次的原因。

我的代码：

import React, { useState, useEffect } from "react";
import axios from "axios";

const App = () => {
  const [users, setUsers] = useState({ results: [] });
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);

      await axios
        .get("https://jsonplaceholder.typicode.com/users/")
        .then(result => setUsers(result));

      setIsLoading(false);
    };

    fetchData();
  }, []);

  console.log(
    users.status === 200 && users.data.map(name => console.log(name))
  );

  return <h2>App</h2>;
};

export default App;

标签： reactjsaxios

解决方案

对于火两次，可能是一次来自componentDidMount，另一次来自componentDidUpdate

https://reactjs.org/docs/hooks-effect.html

每次渲染后都会运行 useEffect 吗？是的！默认情况下，它会在第一次渲染后和每次更新后运行。（我们稍后会讨论如何自定义它。）与其考虑“安装”和“更新”，您可能会发现更容易认为效果发生在“渲染后”。React 保证 DOM 在运行效果时已经更新。

在触发 API 调用之前，您没有检查“isLoading”

    // Only load when is not loading
    if (!isLoading) {
        fetchData();
    }

推荐阅读