问题标签 [react-custom-hooks]

问题

我有一个自定义钩子，用于在 'react-router-dom' 的位置和历史记录的帮助下更新url中的查询字符串。所以在组件中，每当我想添加一个新查询时，我都会使用这个钩子。在这个自定义钩子中，我使用了 useRef来避免更新自定义钩子，这样使用该钩子的组件就不会呈现，但是使用这个钩子的组件会在每次更改位置时呈现。

自定义挂钩以更新 url 中的查询字符串

使用这个钩子的组件

注意：getQueryObj是获取查询 obj 的函数，而setQueryObj是另一个获取查询 obj 并返回字符串的函数

我根据指定的断点有条件地在我的页面上呈现某些组件。当屏幕宽度小于该断点时，我改为渲染具有不同功能的组件的移动版本，其中一个附加了一些 CSS 动画。我最初为页面组件内部的渲染构建了所有逻辑，并且一切正常：

页面组件：

侧边栏动画的样式：

基本上，当在移动布局中单击按钮时，open上述样式表中的类将应用到.MobileSidebardiv，并且左边距动画导致组件从左侧滑出。这工作得很好。

但是，我决定将所有这些逻辑抽象到一个自定义钩子中，该钩子接受断点并返回相应的组件，以便可以更轻松地在应用程序的其他页面上使用它，而无需重复相同的逻辑：

useResponsiveLayout 自定义钩子：

并且实现了钩子的页面组件：

这完全符合我的要求，除了现在，侧边栏不会根据动画滑出，而是在点击时出现和消失。我的猜测是，它与钩子如何返回组件有关，并且在返回的组件 + 渲染和应用类以触发转换之间存在某种时间上的脱节.open，但我不确定。有任何想法吗？

我正在尝试在输入中使用 redux 存储状态值，但我有一个自定义的 useInput 钩子，我不知道如何让它们一起工作。

我构建了一个反应自定义 useInput 钩子来处理值和更改/模糊事件。像这样使用：

我的问题是，如果我想在“编辑”组件中使用它，我想从现有状态中获取初始值，我不能这样做，因为输入值绑定到 useInput 值属性。

所以我不能用我的 useInput 自定义钩子来做到这一点：

我的 useInput 客户挂钩只负责验证输入值。如果我最初可以将值设置为存储值，它会很好用，但是我的组件正在使用 useEffect 调用 API getById(id) 所以第一次加载组件时仍然没有 selectedItem，所以我不能最初设置 useInput到 selectedItem.title。

这是我的 useInput 自定义挂钩代码：

我该如何解决？

所以我使用 react-query 来处理 API 请求。当前的问题是，当我尝试提交表单数据、发布请求时，突变状态始终处于空闲状态，并且加载始终是错误的。我还使用 zustand 进行状态管理。

这是 useSubmitFormData 钩子。发布请求按预期执行，只是突变状态和 isLoading 没有改变。

现在在 FormPage.jsx 上触发如下：

这就是 usePlaceholderApi 的样子。这是一种自定义钩子，旨在将 axios 与拦截器结合使用来处理授权令牌。

这就是 usePlaceholderAxios。

有什么想法可以在这里出错吗？我错过了什么吗？还尝试在突变中直接调用 axios，中间没有 usePlaceholderApi 挂钩，但结果相同。

它看起来像绕口令。

情况是我有一个自定义钩子，让我们在其中调用它hookFather和其他人hookChild1，hookChild2......我需要的值但在完成处理并将其传递给所述钩子hookChild2后应该返回给我的值的情况hookChild1. 并且两个值（ofhookChild1和hookChild2）都将稍后在 hookFather 中进行处理。

我怎样才能建立一个他们互相等待的结构。我不能把钩子放在 useEffect 或 useMemo 里面