[英]Function call after updating the state in React
In this structure:在这个结构中:
export const Parent = () => {
function updateFn(e) {
e.preventDefault()
// do some action with the updated counter
}
return (
<Child updateFn={updateFn} />
)
}
export const Child = (props) => {
const [counter, setCounter] = useState(0)
function updateCounter() {
setCounter(1)
}
return (
<button onClick={updateCounter}></button>
)
}
what would be the best way to call updateFn()
from within the <Child>
, after the counter
was updated, but with the same click?在更新
counter
后,从<Child>
调用updateFn()
的最佳方法是什么,但单击相同? I need this because I am using the value of the updated counter in the updateFn()
.我需要这个,因为我在
updateFn()
使用更新计数器的值。
I have tried with a useEffect
in the <Child>
like this:我已经尝试在
<Child>
使用useEffect
,如下所示:
useEffect(() => {
props.updateFn()
}, [counter])
but the problem with this is, first that it tries to call the function immediately on mount, which is not good because the counter is not updated, and second and most importantly, I get an error Cannot read property 'preventDefault' of undefined
- if I comment out preventDefault()
that will cause a refresh and that's also not good.但问题是,首先它尝试在挂载时立即调用该函数,这不好,因为计数器未更新,其次也是最重要的,我收到错误
Cannot read property 'preventDefault' of undefined
- 如果我注释掉了会导致刷新的preventDefault()
,这也不好。 As a side question, how can I call this from within the <Child>
but also keep the preventDefault()
behavior?作为一个附带问题,如何从
<Child>
调用它,同时保持preventDefault()
行为? If I would call this at the onClick event, without the brackets ()
, preventDefault()
will work.如果我在 onClick 事件中调用它,没有括号
()
, preventDefault()
将起作用。
The solution that I found for this is to:我为此找到的解决方案是:
<div onMouseOver={() => setCounter(1)}>
<button onClick={props.updateFn} />
</div>
While this is working, I think that this is not a very good approach, and I would like to learn the right way.虽然这是有效的,但我认为这不是一个很好的方法,我想学习正确的方法。
Thanks!谢谢!
You can do that inside the updateCounter
function as follow:您可以在
updateCounter
函数中执行此操作,如下所示:
function updateCounter(e) {
setCounter(1);
props.updateFn(e);
}
Additionally, you can get the event paramter of the onClick
in the updateCounter
function and pass it to updateFn
to be able to call preventDefault
on that event.此外,您可以在
updateCounter
函数中获取onClick
的事件参数并将其传递给updateFn
以便能够对该事件调用preventDefault
。
Calling it in the useEffect
with counter
as a dependency will indeed excecute it on the first render.在
useEffect
使用counter
作为依赖调用它确实会在第一次渲染时执行它。 You could add an additional state variable to track if it is the first click or not and call updateFn
depending on that, but it is still a complex solution for a simple problem.您可以添加一个额外的状态变量来跟踪它是否是第一次点击,并根据它调用
updateFn
,但对于一个简单的问题,它仍然是一个复杂的解决方案。 The solution described above should be enough.上面描述的解决方案应该就足够了。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.