React 的 useEffect 钩子,执行一些异步操作来加载基本信息

bash 复制代码
 useEffect(() => {
    (async () => {
      props.onLoad?.(true);
      const res = await onLoadBasic();
      const telephoneNo = await storage.get(TEL_CACHE_KEY);
      props.onLoad?.(false, res);
      const values = transformBasicInput(res, { telephoneNo, redo });
      props.form.formRef?.reset?.(values);
    })();
  }, [props.form.formRef, redo]);

1、代码解析

1、useEffect:

useEffect 是一个 React Hook,允许你在函数组件中执行副作用操作(例如数据获取、订阅或手动 DOM 操作)。

第二个参数是依赖数组,只有在这些依赖发生变化时,useEffect 才会重新执行。

2、自执行异步函数:

(async () => { ... })() 是一个自执行的异步函数,用于在 useEffect 中处理异步操作。

因为 useEffect 不能直接返回一个 Promise,所以需要使用自执行函数。

3、props.onLoad?.(true):

这是一个可选链调用,表示如果 onLoad 函数存在,则调用它并传入 true,通常表示开始加载数据。

4、const res = await onLoadBasic();:

调用 onLoadBasic 函数来异步获取基本信息,并将结果存储在 res 变量中。

5、const telephoneNo = await storage.get(TEL_CACHE_KEY);:

从某个存储(可能是本地存储或其他缓存机制)中获取电话号,存储在 telephoneNo 变量中。

6、props.onLoad?.(false, res);:

再次使用可选链,表示加载完成后调用 onLoad,传入 false 和获取的 res 结果。

7、 const values = transformBasicInput(res, { telephoneNo, redo });:

调用 transformBasicInput 函数,使用获取的基本信息 res 和其他数据(如 telephoneNo 和 redo)来转换输入值。

8、props.form.formRef?.reset?.(values);:

如果 formRef 和 reset 方法存在,调用 reset 方法,重置表单的值为 values。

2、依赖数组

  • [props.form.formRef, redo]:
    • useEffect 只有在 formRef 或 redo 发生变化时才会重新执行。这确保了在这些值改变时重新加载基本信息。

3、总结

这段代码的主要功能是:

  • 在组件加载时异步获取基本信息和电话号。
  • 在加载过程中更新状态以指示加载状态。
  • 处理获取的数据并重置表单的值。这种处理方式使得- 组件在加载数据时能够有效地管理状态和用户界面。
相关推荐
Mr_Xuhhh20 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic7 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端