Javascript 在Reactjs功能组件中是否有setState()的同步替代方案
我知道如何在类组件中实现这一点,但当我在函数组件中使用相同的代码时,我会得到一个错误。这就是我想要的-Javascript 在Reactjs功能组件中是否有setState()的同步替代方案,javascript,reactjs,state,Javascript,Reactjs,State,我知道如何在类组件中实现这一点,但当我在函数组件中使用相同的代码时,我会得到一个错误。这就是我想要的- this.setState({cnt:this.state.cnt+1}) alert(this.state.cnt); 现在我希望警报将计数显示为1。 我们如何在类组件中实现它- this.setState({cnt:this.state.cnt+1},()=>alert(this.state.cnt)) 但当我在功能组件中这样做时 const[count, setCount] = use
this.setState({cnt:this.state.cnt+1})
alert(this.state.cnt);
现在我希望警报将计数显示为1。
我们如何在类组件中实现它-
this.setState({cnt:this.state.cnt+1},()=>alert(this.state.cnt))代码>
但当我在功能组件中这样做时
const[count, setCount] = useState(0);
setCount(count+1, () => alert(count));
我得到一个错误-“预期没有参数-1”。带有react挂钩的状态更新程序不提供回调。您需要使用useEffect来实现相同的行为。此外,由于您希望useEffect仅在更新时运行,因此可以在useRef的帮助下禁用其初始执行
setCount(prev => prev+1);
...
const initialRender = useRef(true);
useEffect(() => {
if(!initialRender.current) {
alert(count);
} else {
initialRender.current = false;
}
}, [count]);
在某些情况下,您可能不希望在更新计数时触发useEffect,而只希望在从特殊函数更新计数时触发useEffect。在这种情况下,您可以使用useRef
const runEffect = useRef(false);
const initialRender = useRef(true);
useEffect(() => {
if(!initialRender.current) {
// This will only be executed when you toggle ref
alert(count);
} else {
initialRender.current = false;
}
}, [runEffect.current]);
// adding ref as a dependency is fine here since we know that a re-render will be triggered by setCount
someFunction = () => {
setCount(prev => prev + 1);
runEffect.current = !runEffect.current;
}
这里的模式也是使用一个useffect
hook和一个要发出警报的状态值的依赖项数组。当状态更新时,效果挂钩在每个渲染中运行一次,并且依赖关系数组在效果实际触发时(在本例中是在计数更新时)帮助过滤
const [count, setCount] = useState(0);
useEffect(() => {
alert('count updated!);
}, [count]);
谢谢你的反馈。我已经在使用useffect()。在useffect()中,我发送get请求,以在数据库更新后从数据库中获取最新计数。所以我认为数据库需要一些时间来更新。这种情况会发生吗?从数据库读取将是异步的,并且在执行useffect post setCount之前不会保证结果。在DB中编写可能会给您一个承诺,您可以使用它,您可以在组件中使用多个useEffect()实例。所以,尝试创建另一个依赖项为“count”的依赖项。@ShubhamKhatri,这是正确的。谢谢