如何调用在 useEffect 中返回值的自定义钩子?

2024-04-28

我有一个自定义钩子,它通过它获取的参数返回一个对象,我需要使用任何更新的参数重新创建它,所以我需要在内部执行此操作useEffect但我无法调用 useEffect 中的钩子。知道如何实施吗?

自定义钩子:

useBuilder.tsx

export default function useBuilder(user) {
  const api = useGlobalApi()
  const user = ...

 // doing a lot of requests and logic here that depends on the current user

  ...

  return builder
}

对于每个选定的用户,我需要一个新的builder从自定义挂钩构造和返回的对象取决于所选的用户。

用法:

Api.tsx

export default function User() {
  const [users, setUsers] = useState([])
  const [user, setUser] = useState({})
  const [builder, setBuilder] = useState({})

  const usersData = api.get('/../users')

  useEffect(() => {
    if (!usersData?.length) return
    setUsers(usersData)
    setUser(usersData[0])
  }, [usersData])

  useEffect(() => {
    const builder = useBuilder(user)
    setBuilder(builder)
  }, [user])

  return (
    <Select
      value={user}
      onChange={e => {
        setUser(user)
      }}
    >
      {users.map(user => (
        <MenuItem key={user.id} value={user}>
          {user.name}
        </MenuItem>
      ))}
    </Select>
  )
}

我收到此错误:

未捕获的错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一:

  1. 您的 React 和渲染器版本可能不匹配(例如 React DOM)
  2. 你可能违反了 Hooks 规则
  3. 您可能在同一个应用程序中拥有多个 React 副本`

知道如何解决这个问题并获得预期的结果吗?

Edit:

我想避免接触自定义钩子,因为这是一个具有很多用途的全局自定义钩子。


删除调用处的效果useBuilder,只需调用组件顶层的自定义挂钩即可。但是,当以下任一情况时,都会调用自定义挂钩users or user状态变量发生变化,但您仍然应该得到您想要的结果,因为useBuilder它的逻辑仅基于user.

export default function User() {
  const [users, setUsers] = useState([])
  const [user, setUser] = useState({})
  // const [builder, setBuilder] = useState({}) // remove this
  const builder = useBuilder(user) // use custom hook here

  const usersData = api.get('/../users')

  useEffect(() => {
    if (!usersData?.length) return
    setUsers(usersData)
    setUser(usersData[0])
  }, [usersData])

  return (
    <Select
      value={user}
      onChange={e => {
        setUser(user)
      }}
    >
      {users.map(user => (
        <MenuItem key={user.id} value={user}>
          {user.name}
        </MenuItem>
      ))}
    </Select>
  )
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何调用在 useEffect 中返回值的自定义钩子? 的相关文章

  • Android 设备上的 PhoneGap 蓝牙插件

    我一直在尝试让 PhoneGap 工作的蓝牙插件 但我似乎不知道哪里出了问题 首先 我的测试设备是 Galaxy S3 GT 19305T 应用程序是使用PhoneGap CLI http docs phonegap com en 3 0
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 在requestAnimationFrame中使用clearRect不显示动画

    我正在尝试在 HTML5 画布上做一个简单的 javascript 动画 现在我的画布是分层的 这样当我收到鼠标事件时 背景层不会改变 但带有头像的顶层会移动 如果我使用 requestAnimationFrame 并且不清除屏幕 我会看到
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • firebase :: 无法读取 null 的属性“props”

    你好 我正在尝试将react router与firebase一起使用 但它给了我这个错误 无法读取 null 的属性 props 这正是代码 我正在其中使用我的反应路由器 向下代码位于作为登录面板组件的组件上 else if this em
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 在 React 中实现 Google 登录错误 -

    我正在尝试在 React 中实现 google 登录 这是我的组件 import Fragment useEffect from react import GOOGLE CLIENT ID from some file const Goog
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 问题:为什么React Native Video不能全屏播放视频?

    我正在react native 0 57 7 中为android和ios创建一个应用程序并使用反应本机视频 https github com react native community react native video播放上传到的视频
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

随机推荐

  • iOS Objective-C 以编程方式获取 VPN IP

    我使用第三方应用程序连接VPN 我们可以在以下位置获取详细信息Settings gt VPN gt information 我怎样才能得到Assigned IP通过 Objective C 在我们的应用程序中以编程方式 NSString a
  • 是否可以在 Android 中动态更改 EditTextPreference 的摘要?

    我设置了一个首选项屏幕来编辑应用程序中的设置 我想插入一个 EditTextPreference 其中包含一个标题 如 设置您的名字 和一个包含输入名称的摘要 那可能吗 先感谢您 当然 这是一个简短的例子 EditTextPreferenc
  • VS2010 中使用 lambda 参数捕获的 C++ 嵌套 lambda bug?

    我使用的是 Visual Studio 2010 它显然在 lambda 上有一些错误行为 并且有这个嵌套 lambda 其中内部 lambda 返回包装为 std function 的第二个 lambda 参见MSDN 上的 高阶 Lam
  • 从函数调用动态 SQL

    我正在编写一个返回表的函数 有两个参数传递给该函数 并构建并执行查询并将其插入到返回的表中 但是我收到这个错误 只能从函数内执行函数和一些扩展存储过程 我不想使用存储过程 因为这是一个简单的实用函数 有谁知道这是否可以做到 我的函数编码如下
  • 跨多个类使用 SharedPreferences?

    我有一个 SharedPreferences 目前适用于一类 但不适用于第二类 我想我可能把它称为错误的 因为我得到的错误说 The method getSharedPreferences String int is undefined f
  • Firefox 中忽略的图像最大高度百分比

    HTML div class container div
  • android中无法绕过的Root检测方法

    我知道在 root 设备上运行拥有敏感信息的应用程序根本不安全 因此 开发人员通常在这种情况下进行 root 检测 如果发现设备已 root 则该应用程序将不会安装 一切都好 开发者在root检测中使用的主要技术是检查superuser a
  • Inno Setup,APP启动 Windows启动时

    对于 Inno 设置 我想为 Windows 启动时 MyAPP 自动启动创建一个复选框任务 我的代码如下 并且 如何编写下面的代码 DO Set AutoStart WhenWindowsStart Tasks Name StartMen
  • 使用 .Net 检测外部应用程序中的拖放操作

    我需要检测拖放操作外用 是否可以 我想到写一个钩子来检测这些操作 任何人都可以指出我可以尝试挂钩哪些消息或 api 函数来检测拖放事件的正确方向吗 我想用 C 来做这个 提前致谢 您可以通过两条明显的路径来尝试此操作 第一个是挂钩参与调解拖
  • 使用 Ruby OpenSSL 库时公钥无效

    我正在尝试在 Ruby 中生成 RSA 密钥对 主要使用来自这篇博文 http stuff things net 2009 12 11 generating rsa key pairs in ruby 这是我稍微修改过的代码 def gen
  • Java 中的匿名类是如何编译的?

    我听说 Java 字节码实际上不支持任何类型的未命名类 javac 如何将未命名的类转换为命名的类 它综合了形式的名称EnclosingClass n 其中 n 是匿名类的计数器EnclosingClass 因为使用 不鼓励使用标识符 这些
  • 让 Akka.NET 连接到远程地址

    我发现的所有演示如何开始在 Akka NET 中进行远程处理都演示了最简单的用例 其中两个参与者使用 localhost 在同一台计算机上运行 我试图让 Akka NET actor 连接到远程计算机 但遇到了一些困难 代码非常简单 客户端
  • AngularJS从base64生成二进制数据图像并作为图像文件发送到服务器

    我正在使用这个工具在我的 AngularJS 应用程序中裁剪图像 https github com fengyuanchen cropper https github com fengyuanchen cropper 然后我尝试将数据存储到
  • 硒找不到元素

    我在访问元素时遇到问题 fieldset legend Legend1 legend table width 100 quot cellspacing 3 tbody tr tr tr tr tbody table fieldset leg
  • T-sql:获取列的总和

    我有一张如下所示的表 W1 W2 w3 Gold 10 2 3 Silver 3 1 1 但我需要一个结果 W1 W2 w3 Gold 10 12 15 Silver 3 4 5 有什么方法可以得到这个结果吗 Mysql查询 SELECT
  • 如何让 CopyFileEx 报告回来以便我可以取消文件复制操作?

    我正在尝试使用FileUtilities CopyFile包装纸CopyFileEx from here http msdn microsoft com en us magazine cc163851 aspx 但是CopyFileCall
  • 添加新列后如何使用 activeandroid 更新表

    感谢您的阅读和帮助 我正在使用 ActiveAndroid 3 0 Android 2 2 在我的应用程序中 我有一个名为 用户 的模型 最初 我只使用 id 名称 密码 列 属性创建模型 我在模拟器上运行该应用程序 并且它有效 Table
  • 各种 Python 实现的优缺点是什么?

    我对 Python 比较陌生 并且一直使用标准的 cpython v2 5 实现 不过 我一直想知道其他实现 特别是 Jython 和 IronPython 是什么让他们变得更好 是什么让他们变得更糟 还有哪些其他实现 我想我正在寻找的是每
  • 如何在执行 apache HttpPost 时将 UrlEncodedFormEntity 中的空格编码为 %20?

    我正在访问的网络服务需要 URLEncodedFormEntity 形式的参数 我无法根据 Web 服务的要求将空间更改为 20 而是将空间转换为 我的代码是 HttpClient client new DefaultHttpClient
  • 如何调用在 useEffect 中返回值的自定义钩子?

    我有一个自定义钩子 它通过它获取的参数返回一个对象 我需要使用任何更新的参数重新创建它 所以我需要在内部执行此操作useEffect但我无法调用 useEffect 中的钩子 知道如何实施吗 自定义钩子 useBuilder tsx exp