reactjs - 在功能组件中使用回调对 setState 进行反应
问题描述
我在类组件中编写了一个非常简单的示例:
setErrorMessage(msg) {
this.setState({error_message: msg}, () => {
setTimeout(() => {
this.setState({error_message: ''})
}, 5000);
});
}
所以在这里我调用该setState()
方法并给它一个回调作为第二个参数。
我想知道我是否可以使用 useState 钩子在功能组件中执行此操作。
据我所知,你不能将回调传递给这个钩子的 setState 函数。当我使用useEffect
钩子时 - 它最终陷入无限循环:
所以我猜 - 这个功能不包含在功能组件中?
解决方案
回调功能在 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,而您也不想重置它。但是,如果您想在每次 setErrorMessage 时重置消息,您可以简单地编写一个普通的 useEffect,如
useEffect(() => {
if(errorMessage !== ""){ // This check is very important, without it there will be an infinite loop
setTimeout(() => {
setErrorMessage('');
}, 5000);
}
}, [errorMessage])
推荐阅读
- python-3.x - 如何在 Python 中将字符串时间戳转换为日期时间对象
- node.js - nsqjs依赖错误:bignumber不是构造函数
- list - Flutter 动态列表,Table 显示意外结果
- powershell - 您不能在空值表达式上调用方法。+ $submitButton.click()
- python - 数据框转换和组合行
- sql - 将行转换为列并使用 group by 求和
- flutter - 为什么即使具有相同的值,这个填充也是不同的?扑
- c# - NotMapped 属性导致在 EF Core 的 select 语句中加载所有属性
- reactjs - reactjs中如何发布webrtc直播
- c++ - 根据图案扫描字符