我在类组件中编写了一个非常简单的示例:
setErrorMessage(msg) {
this.setState({error_message: msg}, () => {
setTimeout(() => {
this.setState({error_message: ''})
}, 5000);
});
}
所以这里我称之为setState()
方法并给它一个回调作为第二个参数。
我想知道是否可以使用 useState 挂钩在功能组件内执行此操作。
据我所知,您无法将回调传递给该挂钩的 setState 函数。当我使用useEffect
hook - 它最终陷入无限循环:
所以我猜 - 这个功能没有包含在功能组件中?
回调功能在react-hooks中不可用,但您可以使用编写一个简单的解决方法useEffect
and useRef
.
const [errorMessage, setErrorMessage] = useState('')
const isChanged = useRef(false);
useEffect(() => {
if(errorMessage) { // Add an existential condition so that useEffect doesn't run for empty message on first rendering
setTimeout(() => {
setErrorMessage('');
}, 5000);
}
}, [isChanged.current]); // Now the mutation will not run unless a re-render happens but setErrorMessage does create a re-render
const addErrorMessage = (msg) => {
setErrorMessage(msg);
isChanged.current = !isChanged.current; // intentionally trigger a change
}
上面的示例考虑到这样一个事实:您可能也想从其他地方设置 errorMessage,而您又不想重置它。但是,如果您想在每次设置ErrorMessage时重置消息,您可以简单地编写一个正常的useEffect,例如
useEffect(() => {
if(errorMessage !== ""){ // This check is very important, without it there will be an infinite loop
setTimeout(() => {
setErrorMessage('');
}, 5000);
}
}, [errorMessage])
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)