React Hook useEffect ：使用 axios 和 async await .api 获取数据，调用连续相同的 api

Posted 2023-02-22

【中文标题】React Hook useEffect ：使用 axios 和 async await .api 获取数据，调用连续相同的 api

【英文标题】：React Hook useEffect : fetch data using axios with async await .api calling continuous the same api

【发布时间】：2020-01-06 01:27:12

【问题描述】：

当我从API 获取数据并使用useEffect 将响应设置为数组时 它调用API 重复连续。

let [product, setproduct] = useState([]);

async function fetchData() 
    let response = await axios(
      `api`
    );
    let user = await response.data;
    setproduct(user);
    console.log(product);
  

  useEffect(() => 
    fetchData();
  ); 

【参考方案1】：

将空的 [] 作为第二个参数传递给 useEffect 方法。它将在初始渲染时调用，如下所示。

  useEffect(() => 
    fetchData();
  , []); 

【参考方案2】：

来自docs，

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

您可以提供空的依赖数组/[] 作为useEffect 的第二个参数，它与componentDidMount 相同，在组件生命周期中只执行一次。

useEffect(() => 
    fetchData();
, []); //This will run only once