问题标签 [react-custom-hooks]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
69 浏览

reactjs - 如何在 map 函数中使用 useRef 更新输入值的值?

我决定使用refs挂钩输入,实际上我创建了一个自定义挂钩来使用获取的数据,然后制作参考!

我在地图功能中使用:

但是我无法获取 onChange 函数来更新值。

onClick预期的工作:

但不是onChange

那么如何让 handleChange 更新,即 DOM 和profileDataFromApi????

这也是整个组件:

0 投票
0 回答
49 浏览

reactjs - ReactJS:从 Firestore onAuthStateChanged 获取用户文档

我正在将一个项目从 Angular 重写为 ReactJS,所以我对它应该如何工作有一些预先存在的想法: 我正在尝试使用当前的 firebase.auth() 从 Firestore 获取我的用户文档并将其保存为静态对象(以避免对 Firebase 的冗余调用)。

在 Angular 中,您可以使用服务文件(单例)来监听 firebase.auth() 状态,使用 currentUser.uid 调用 firestore,并存储 doc 对象以供任何组件抓取和使用。

在 React 中,似乎正确的方法是通过全局状态,或者我决定采用的方法,一个自定义钩子。



问题:单击该 UserMenu 中的按钮(如 Login 或 Logout)后,菜单关闭(不再呈现),并且在 useCurrentUser() 中实际接收新 AuthState 的最终操作不会发生。因此,用户单击 logout(),菜单关闭,并且用户保持登录状态,直到再次单击该菜单以调用渲染并让这些 useEffects() 再次运行。

这感觉像是一种非常干净、简单的方法来处理身份验证和获取我的自定义用户文档,但我缺少最后一点让它完全工作。我需要再进行一个渲染循环,但我不知道该怎么做。或者,在 React 中可能有更好的方法来实现这个目标。

0 投票
2 回答
71 浏览

javascript - 在 Typescript 中将类型作为参数传递

我编写了一个自定义钩子来帮助我不为某些 fetch 调用重复代码。它看起来像这样:

但我收到一些抱怨数据类型的 TS 错误。是否可以将类型作为参数传递,因为每个调用钩子的组件可能不同?或者解决这个问题的最佳方法是什么?

0 投票
0 回答
17 浏览

reactjs - 无法在表单的输入字段中输入文本(使用 React 自定义挂钩进行输入处理)

好的,我在 React 中创建了一个相当大的表单(这里只显示了三个字段),因此想要使用自定义钩子进行处理。我发现一篇文章解释了一种方法,但是,当我尝试在我的输入字段中键入文本时,它们不会被填充。我的 e.target 值的 console.log 看起来该字段在每次击键后都会重置。我想念什么?干杯

我试图简化我的代码,并希望它有意义:

0 投票
1 回答
40 浏览

reactjs - 无法使用反应上下文传递状态

我正在尝试成功使用 React Context,但我遇到了很多麻烦。我什至无法成功地将任何一个级别传递给提供者的直系子级,因此我在这个阶段得到的只是控制台中的“x 未定义”错误。我正在为上下文使用一个单独的类和一个自定义挂钩来管理我的状态数据。

App.js(TodoProvider 组件在其子组件周围扭曲) -

TodoContext.js(我的上下文) -

useTodo.js(我的自定义钩子来管理状态)

CompletedTasklist(我在其中一个孩子中使用上下文的实现示例) -

我一直在尝试解决这个问题一段时间,但无法解决这个问题。

0 投票
0 回答
15 浏览

reactjs - React:如何将挂钩中使用的表达式传递到 Context/reducer 模式中?

我得到了一个使用constate创建的状态管理文件,其中有一个自定义钩子:

但是现在我想进入React Context/Reducer 模式

我已经走了很远,但我想知道usePolicyChangeOption上面写的方式在下面的 React Context/Reducer 中是否有意义?

提前致谢!

0 投票
1 回答
65 浏览

reactjs - 自定义钩子触发每个渲染

我想在组件安装时运行回调,但不是在每次渲染时运行。使用useEffect和一个空的依赖数组创建了警告。我在另一个线程上阅读,现在我找不到可以通过创建自定义钩子来实现这一点:

用法:

这不是使用:

因为这会产生警告。我知道每次渲染都会调用钩子,但为什么runOnce.current不阻止回调运行两次?

0 投票
1 回答
35 浏览

reactjs - 自定义挂钩返回错误值

我做了一个自定义钩子作为我的交叉点观察者,但我同时两次获得虚假和真实状态!,第一次是错误的(两次),第二次是正确的(两次)为什么会发生这种情况?为什么状态会改变自己?state 必须为真,因为 h3 是 100% 可见的。

这是代码:

应用程序.js

使用IntersectionObserver 自定义钩子:

这是奇怪的输出:(在初始渲染时) 在此处输入图像描述

0 投票
2 回答
32 浏览

reactjs - 无法在 Firebase 中创建集合?

如果不存在,我正在尝试创建一个集合并上传 img 文件。

我正在接收上传图像 URL 和进度,但它没有创建名为图像的集合。

不确定是否addDoc()有效。

0 投票
0 回答
22 浏览

reactjs - 反应上下文;useReducer 模式:initialState 上的属性能否/应该具有更新 initialState 的功能?

我有一个自定义钩子,我正试图将其移入上下文/减速器模式:

你可以看到我有一个属性,initialState它正在调用一个函数this

我在想你应该做这样的事情:

任何人都可以建议使用这种模式来处理这个问题的方法是什么?