首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么Axios在useEffect中调用只返回一次数据?

Axios在useEffect中调用只返回一次数据的原因是因为useEffect只在组件渲染完成后执行一次,并且默认情况下只会监听组件的初始渲染和依赖项的变化。当使用Axios发送异步请求时,请求的结果会在组件渲染完成后返回,然后被保存在组件的状态中。由于useEffect只在组件的初始渲染时执行一次,因此Axios只会在组件首次渲染时发送请求并返回数据。

如果想要在特定的依赖项变化时重新发送请求并更新数据,可以在useEffect的依赖项数组中添加需要监听的状态或变量。当依赖项发生变化时,useEffect会重新执行,从而触发Axios发送请求并更新数据。

以下是一个示例代码:

代码语言:txt
复制
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://api.example.com/data');
      setData(response.data);
    };

    fetchData();
  }, []); // 空数组表示只在组件的初始渲染时执行一次

  return (
    <div>
      {/* 使用返回的数据进行渲染 */}
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;

在上述示例中,useEffect的依赖项数组为空,因此Axios只会在组件的初始渲染时执行一次。如果需要在特定的依赖项变化时重新发送请求,可以将需要监听的状态或变量添加到依赖项数组中,例如:

代码语言:txt
复制
useEffect(() => {
  // 发送请求并更新数据
}, [dependency1, dependency2]);

这样,当dependency1或dependency2发生变化时,Axios会重新发送请求并更新数据。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【React】945- 你真的用对 useEffect 了吗?

在这个 effect ,我们设置了 document 的 title 属性,不过我们也可以执行数据获取或调用其他命令式的 API。 为什么组件内部调用 useEffect?...,不仅会请求后端的数据,还会通过调用setData来更新本地的状态,这样会触发view的更新。...我的思路是,先设置这个接口的返回值为data=[], 等到数据是再去请求另一个接口,即data作为useEffect的第二个参数传入。 但是不知道为什么会造成死循环,拿不到我们想要的结果。...时的报错 代码,我们使用async / await从第三方API获取数据。...我们可以看到useEffect的依赖数据并没有添加loading,这是因为,我们不需要再loading变更时重新调用useEffect

9.6K20

(译) 如何使用 React hooks 获取 api 接口数据

原文地址:robinwieruch 全文使用意译,不是重要的我就没有翻译了 本教程,我想向你展示如何使用 state 和 effect 钩子React获取数据。...effect hook 的触发不仅仅是组件第一次加载的时候,还有一次更新的时候也会触发。由于我们获取到数据后就进行设置了组件状态,然后又触发了 effect hook。所以就会出现死循环。...我们只想在组件第一次加载的时候获取数据 ,这也就是为什么你可以提供一个空数组作为 useEffect 的第二个参数以避免组件更新的时候也触发它。当然,这样的话,也就是组件加载的时候触发。...因为你提供的是一个空数组作为useEffect的第二个参数是一个空数组,所以effect hook 的触发不依赖任何变量,因此组件第一次加载的时候触发。...毕竟,我们只有三个状态转换:初始化提取过程,通知成功的数据提取结果,并通知错误的数据提取结果。 我们自定义的 hook ,state 像以前一样返回。但是因为我们有一个状态对象而不是独立状态。

28.5K20
  • React Hooks踩坑分享

    我们组件第一次渲染的时候,从useState()拿到num的初始值为0,当我们调用setNum(1),React会再次渲染组件,这一次num是1。...这一次弹出的数据是5。 为什么同样的例子类组件会有这样的表现呢?...当我们函数本身需要的时候才改变。 在上面的例子,我们无论点击多少次点击按钮,num的值始终为1。这是因为useCallback的函数被缓存了,其依赖数组为空数组,传入其中的函数会被一直缓存。...但是依赖内部变量,可以将其effect之外调用它,并让effect依赖于它的返回值。 万不得已的情况下,你可以把函数加入effect的依赖项,但把它的定义包裹进useCallBack。...每次调用fetchData函数会更新list,list更新后fetchData函数就会被更新。fetchData更新后useEffect会被调用useEffect调用了fetchData函数。

    2.9K30

    React: hooks 该怎么优雅的获取数据

    当然你需要先了解一下 react hooks 的新特性 github.com/reactjs/rfc… reactjs.org/docs/hooks-… 使用 hook 获取数据 这里有一篇讲解 react...怎么去获取数据 react 怎么优雅的获取数据 下面看看怎么使用 hook 来获取 1、useState的使用 import React, { useState } from 'react'; function...2、Axios 的使用(useEffect的使用) import React, { useState, useEffect } from 'react'; import axios from 'axios...因为当我们获取数据后存储数据到 state 的时候,我们的组件会随之更新,然后 effect 会再次运行一次。然后我们会又获取一次 data。...我们的目的是组件加载完成的时候获取数据 import React, { useState, useEffect } from 'react'; import axios from 'axios'

    2.5K30

    axios

    axios返回的是一个Promise的对象,要想获得返回结果需要在 then 获得,catch 处理异常。...我们可以看到index.js也并没有写具体代码,而是因我那个了lib下的axios 我们看一下 axios.js文件 可以看到我们的axios是通过createInstance创建的实例,创建实例...因此可以 axios()这么写也就是第一种写法。 2. 并没有 axios.get 那么为什么可以使用 axios.get那?...处理返回值 Promise 同步代码去写异步操作 async await关键字的使用 我们用的是react hooks,正常来说,useEffect的函数写async关键字是可以的, useEffect...` 允许向服务器发送前,修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组的函数必须返回一个字符串,或 ArrayBuffer,或 Stream

    4K10

    如何优雅的react-hook中进行网络请求

    这里我们函数调用了setData设置接口返回数据,触发页面的更新机制,就造成了死循环。...其实我们只是需要再页面加载后执行一次即可,也就是class写法componentDidMount()进行数据请求。 useEffect提供了第二参数,用于解决此类问题。...这里传入一个空数组[],来让effect hookcomponent mount后执行,避免component update后继续执行。...,useEffect hook的第二个参数是空数组,所以没有触发effect运行,重新获取数据,我们添加一下依赖项"search"到数组,重新运行代码后,点击按钮就可看到我们的数据已经正确更新了。...useReducer很多时候可以用来替换useState, 接受两个参数(state, dispatch)返回一个计算后的新state,已达到更新页面的效果。

    9.1K73

    【React】406- React Hooks异步操作二三事

    返回值函数组件卸载时执行一次,用来清理一些东西,例如计时器。...当需要在其他地方(例如点击处理函数)设定计时器, useEffect 返回清理时,使用局部变量或者 useRef 来记录这个 timer。不要使用 useState。...但实际运行下来, useEffect 返回的清理函数,得到的 timer 却是初始值,即 0。 为什么两种写法会有差异呢? 其核心在于写入的变量和读取的变量是否是同一个变量。...但 useEffect 返回闭包的 timer 依然指向旧的状态,从而得不到新的值。...React 这样设计的目的是为了性能考虑,争取把所有状态改变后重绘一次就能解决更新问题,而不是改一次重绘一次,也是很容易理解的。

    5.6K20

    轻松学会 React 钩子:以 useEffect() 为例

    这种进行单纯的数据计算(换算)的函数,函数式编程里面称为 "纯函数"(pure function)。 三、副效应是什么?...五、useEffect() 的用法 useEffect()本身是一个函数,由 React 框架提供,函数组件内部调用即可。...八、useEffect() 的返回值 副效应是随着组件加载而发生的,那么组件卸载时,可能需要清理这些副效应。 useEffect()允许返回一个函数,组件卸载时,执行该函数,清理副效应。...(); }; }, [props.source]); 上面例子useEffect()组件加载时订阅了一个事件,并且返回一个清理函数,组件卸载时取消订阅。...实际使用,由于副效应函数默认是每次渲染都会执行,所以清理函数不仅会在组件卸载时执行一次,每次副效应函数重新执行之前,也会执行一次,用来清理上一次渲染的副效应。

    3.6K20

    如何更好的 react 中使用 axios 的拦截器

    我之前 react 处理 axios 的封装一直没有找到很好的方式,因为 axios 是非常独立,并且提供的各种 api 都是一次性配置,例如 axios.create、axios.defaults...无论是无框架页面还是 Vue ,我都倾向于对 axios 进行一次性配置,例如: export const ajax = axios.create({ // ... }); // 拦截器 -...你也许会疑问为什么要使用 useRef 来存储写入日志的函数,这是因为写入操作可能是异步的,特别是 axios 的拦截器,拦截器会和请求执行的上下文进行绑定,异步的请求可能会把日志写到旧的状态,我习惯把这种绑定实时状态的结构称作... react 活了过来,拦截器会实时把请求记录在 react 的上下文中,我们可以 react 的任意地方调用日志上下文查看请求日志。...默认页面 DefaultPage 组件,我们可以进行一次错误的请求,请求会返回给我们 404 的状态码,现在我们需要在 axios 中进行拦截,当请求出现 404 时,跳转到 /404 页面。

    2.6K30

    React Hook技术实战篇

    的钩子通过axios获取远程mock数据, 并且使用setData更新页面.但是在运行程序的时候, 会出现一个问题即会发送两次请求,使用useEffect发送请求时,相当于componentDidMount...函数, 第二个参数为空数组, 就能实现组件安装时获取数据. useEffect的第二个参数可用于定义函数所依赖的所有变量(在此数组中分配), 如果其中一个变量发生变化, 则uesEffect会再次执行...use命名开头的函数, 并且返回一个组件所需要的数据和更新数据的方法....,可以通过dispatch函数将数据发生发送到reducer功能上.而在自定义的Hook返回的对应的状态....现在,由动作类型决定的每个状态转换都会返回基于先前状态和可选有效负载的新状态。例如,成功请求的情况下,有效载荷用于设置新状态对象的数据

    4.3K80

    React Hooks

    这种进行单纯的数据计算(换算)的函数,函数式编程里面称为 "纯函数"(pure function)。 函数一般来说,只应该做一件事,就是返回一个值。...) 下面是从远程服务器获取数据的例子: import React, { useState, useEffect } from 'react' import axios from 'axios' function...拿到数据以后,再用 setData() 触发组件的重新渲染。 由于获取数据只需要执行一次,所以上例的 useEffect() 的第二个参数为一个空数组。...④ 返回值 副作用是随着组件加载而发生的,那么组件卸载时,可能需要清理这些副作用。 useEffect() 允许返回一个函数,组件卸载时,执行该函数,清理副作用。...() } }, [props.source]) 上面例子useEffect() 组件加载时订阅了一个事件,并且返回一个清理函数,组件卸载时取消订阅。

    2.1K10

    万万没想到react请求数据花样如此之多

    引入axios请求网络数据,将请求放入useEffect import React, { useState, useEffect } from 'react'; import axios from '...Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合,上述代码你应该不会满意吧,你可能仅仅需要网络请求代码...componentDidMount的时候执行一次。...然而,上面的代码会有一个告警 那是因为useEffect要求要么返回一个清理函数,要么啥都别返回,而上面返回的是一个Promise体,他将最终返回的是一个结果,这显然会受到一个告警,解决的办法如下。...中加了一个didCancel变量,并且返回一个闭包,其实就是一个函数啦,只不过他让你可以改他母体的变量而已,因此,componentWillUnmount时候,这个变量被置位false了,如是dispatch

    1.3K81

    实战 React 18 的 Suspense

    React 18 ,虽然仍然可以使用useEffect来完成一些事情,如使用 API 接口读取的数据填充状态,但实际上不应该将其用于此类目的。...如果你应用程序启用StrictMode,开发模式下,你将发现使用useEffect会被调用两次,因为现在React会mount 组件、卸载它,然后再次 mount 它,以检查代码是否运行正常。...举个例子 来看一个简单的例子,我们只需创建一个组件来获取API的某些数据,并且希望准备好后渲染该组件。...在这里我使用了axios,但你可以根据自己的需要使用任何东西。 组件读取数据 当获取方面的所有内容都准备好后,我们来组件中使用它。假设有一个简单的组件,只需从某个接口读取名称列表并打印。...不同于习惯组件通过useEffect钩子调用 fetch 的做法,这一次我们要直接在组件开始时(放在任何 hooks 之外),使用我们包装器中导出的read方法来调用请求,因此我们的Names组件大概是这个样子的

    38310

    React Hook实战

    useState 会返回一对值:当前状态和一个让你更新它的函数,你可以事件处理函数或其他一些地方调用这个函数。...React数据获取、设置订阅、手动的更改 DOM都可以称为副作用,可以将副作用分为两种,一种是需要清理的,另外一种是不需要清理的。比如网络请求、DOM 更改、日志这些副作用都不要清理。...useEffect返回一个回调函数,作用于清除上一次副作用遗留下来的状态,如果该 useEffect 调用一次,该回调函数相当于 componentWillUnmount 生命周期。...由于useEffect是每次render之后就会被调用,此时title的改变就相当于 componentDidUpdate,但我们不希望事件监听每次 render 之后进行一次绑定和解绑,此时就用到了useEffect...传入一个空数组[], 此时useEffect只会调用一次,相当于执行类组件的componentDidMount 和 componentWillUnmount生命周期。

    2.1K00

    React Hook概述

    React 更新 DOM 之后我们如果想要运行一些额外的代码,比如发送网络请求,手动变更 DOM,记录日志,订阅外部数据源等等,我们就会使用到 Effect Hook,类似于 Vue 的 nextTick...默认情况下,一次渲染之后以及每次更新之后都会执行,只需要知道 effect 发生在渲染之后,而不用再去考虑是挂载还是更新状态,Effect 组件需要清除的时候,可以通过返回一个函数进行清除,React...将会在执行清除操作时调用它 // comments/MouseTracker.js import React, { useState, useEffect } from 'react' function...,可以传递数组作为 useEffect 的第二个可选参数,就能够通知 React 跳过对 effect 的调用 useEffect(() => { document.title = `You clicked...就是将组件逻辑提取到可重用的函数 // hooks/useURLLoader.js import { useState, useEffect } from 'react' import axios from

    1K21

    【React】883- React hooks 之 useEffect 学习指南

    **然后,sayHi函数,局部常量name会和某次调用的person关联。**因为这个常量是局部的,所以每一次调用都是相互独立的。...**可以看到我们setCount调用中用到了count。在这个场景,我们其实并不需要在effect中使用count。...尽管effect运行了一次,第一次渲染的定时器回调函数可以完美地每次触发的时候给React发送c => c + 1更新指令。它不再需要知道当前的count值。因为React已经知道了。...**effects传递最小的信息会很有帮助。...它以另一种方式解决了问题 - 我们使函数本身需要的时候才改变,而不是去掉对函数的依赖。 我们来看看为什么这种方式是有用的。

    6.5K30
    领券