如何调用在 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 中返回值的自定义钩子? 的相关文章

随机推荐

  • 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