useEffect倾听语境是否正确?

const {
  data,
} = useContext(AuthContext);

async function getProfile() {
    try {
      setLoading(true);
      console.info('getProfile called', data.token);
      const response = await getByToken(data.token);
      if (response && response.ok) {
        setFirstName(response.userData.firstName);
        setLastName(response.userData.lastName);
        setEmail(response.userData.email);
      }
    } catch (e) {
      console.info('Error', e);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (data.userData) {
      getProfile();
    }
  }, [data.userData]);

这是我发现的使用不同于null的userData调用getProfile的方法

推荐答案

是的,这就是它的工作原理.虽然说useEffect正在监听变量的变化可能是不正确的.useEffect内的回调运行是因为满足了两个条件:

  1. 渲染发生.
  2. 依存关系数组具有changing个依存关系

重新命名是因为上下文值已更改,内部组件是Context中的Consumer(因为它调用useContext).

A sandbox link,举个简单的例子

Javascript相关问答推荐

从PWA中的内部存储读取文件

为什么当我解析一个promise时,输出处于挂起状态?

用JavaScript复制C#CRC 32生成器

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

WebGL 2.0无符号整数输入变量

Javascript json定制

如何使用JavaScript拆分带空格的单词

如何在.NET Core中将chtml文件链接到Java脚本文件?

Puppeteer上每页的useProxy返回的不是函数/构造函数

将异步回调转换为异步生成器模式

如何在JAVASCRIPT中合并两组对象并返回一些键

以编程方式聚焦的链接将被聚焦,但样式不适用

删除加载页面时不存在的元素(JavaScript)

处理app.param()中的多个参数

有没有办法更改Chart.js 3.x.x中主要刻度的字体?

JavaScript将字符串数字转换为整数

在单击按钮时生成多个表单时的处理状态

React数组查找不读取变量

如何在单击链接时设置一个JavaScript变量(以打开弹出窗口的特定部分)

如果未定义,如何添加全局变量