问题标签 [react-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.
javascript - 使用 React hook 实现自增计数器
代码在这里:https ://codesandbox.io/s/nw4jym4n0
问题是每个setCounter
触发器都重新渲染,因此间隔被重置并重新创建。这可能看起来不错,因为状态(计数器)不断增加,但是当与其他钩子组合时它可能会冻结。
这样做的正确方法是什么?在类组件中,它很简单,实例变量保存间隔。
reactjs - 将钩子导入 React Typescript
我正在尝试使用 TypeScript 在 React (^16.6.0) 应用程序中实现挂钩
知道这个导入的正确语法是什么吗?
reactjs - React - 在组件中使用 ref 并将其传递给 props 中的父级
更新:我的问题实际上是由于拼写错误 - 如果您想在子组件和父组件中使用子元素 ref,一般方法可以正常工作。
这是有效方法的一个工作示例: https ://codesandbox.io/s/rwj7z7o7oo
原帖:
我正在尝试将 ref 转发给父组件,同时还使子组件(这是一个类)中的函数可以访问 ref。目前,我可以成功地将 ref 传递给父级,但在子级中不再可以访问 ref。
是否有另一种方法可以让我在 Child 和 Parent 中使用 ref?
reactjs - React Hooks - 修改后的状态没有立即反映
我正在尝试使用React
钩子将一个类重构为无状态组件。
该组件本身非常简单,我看不出我在哪里犯了错误,因为它几乎是来自 react 文档的复制粘贴。
当用户单击按钮时,组件会显示一个弹出窗口(按钮通过道具传递给我的组件)。我正在使用typescript
.
hooks
我评论了未能在版本中执行我想要的行
这是我原来的课程:
这是React hooks
版本:
reactjs - 如何比较 React Hooks useEffect 上的 oldValues 和 newValues?
假设我有 3 个输入:rate、sendAmount 和 receiveAmount。我将这 3 个输入放在 useEffect 差异参数上。规则是:
- 如果 sendAmount 改变,我计算
receiveAmount = sendAmount * rate
- 如果receiveAmount改变,我计算
sendAmount = receiveAmount / rate
- 如果汇率发生变化,我计算
receiveAmount = sendAmount * rate
何时sendAmount > 0
或我计算sendAmount = receiveAmount / rate
何时receiveAmount > 0
这是用于演示问题的代码框https://codesandbox.io/s/pkl6vn7x6j 。
有没有办法比较oldValues
和newValues
喜欢componentDidUpdate
而不是为这种情况制作3个处理程序?
谢谢
这是我使用https://codesandbox.io/s/30n01w2r06的最终解决方案usePrevious
在这种情况下,我不能使用多个useEffect
,因为每次更改都会导致相同的网络调用。这就是为什么我也用它changeCount
来跟踪变化。这changeCount
也有助于仅从本地跟踪更改,因此我可以防止由于服务器更改而导致不必要的网络调用。
reactjs - 尝试在 ReactDOM.render 中使用 React Hooks。这样对吗?
所以我得到dispatcher.useEffect is not a function
我正在尝试在渲染方法中使用函数:
我的Root.js文件如下所示:
最后我在 Preload.js 中使用 useEffect
对该错误的大多数答案是,人们忘记在 useEffect 中使用函数,但在我的情况下不是。
javascript - 是否可以使用 React 中的 useState() 钩子在组件之间共享状态?
我正在试验 React 中的新 Hook 功能。考虑到我有以下两个组件(使用 React Hooks) -
Hooks 声称解决了组件之间共享状态逻辑的问题,但我发现 and 之间的状态HookComponent
是HookComponent2
不可共享的。例如 in 的变化count
不会HookComponent2
导致HookComponent
.
是否可以使用useState()
钩子在组件之间共享状态?
javascript - 如何使用 React Hooks 处理 React Svg 拖放
我正在尝试在 SVG 形状上实现拖放。我成功地使它与使用类组件一起工作。这是代码沙箱的链接: https ://codesandbox.io/s/qv81pq1roq
但是现在我想通过使用带有自定义 Hook 的新 React api 来提取这个逻辑,该 Hook 能够将此功能添加到功能组件中。我尝试了很多东西,但没有任何效果。这是我最后一次尝试:
https://codesandbox.io/s/2x2850vjk0
我怀疑我添加和删除事件侦听器的方式有些问题......所以这是我的问题:
你认为,有可能把这个 DnD SVG 逻辑放到一个自定义 Hook 中吗?如果是,你知道我做错了什么吗?
javascript - 使用 React 钩子如何同时更新 2 个钩子,但在其他钩子中使用一个的 prevState
在下面的代码中,当我调用时,我_toggleSearch
同时更新了 2 个钩子。
toggleSearchIsVisible
是一个简单的布尔值,但是,setActiveFilter
钩子必须在前一个searchIsVisible
状态中传递。
我如何确定传入时其他状态尚未更新?或者我应该如何重组一切?以前setState
我可以很容易地通过以前的状态。
我现在已经这样做了:
任何其他建议表示赞赏!