Reactjs 功能组件中是否有 setState() 的同步替代方案答案

【问题标题】：Is there a synchronous alternative of setState() in Reactjs functional componentsReactjs 功能组件中是否有 setState() 的同步替代方案
【发布时间】：2020-05-29 05:58:55
【问题描述】：

我知道如何在类组件中执行此操作，但是当我在功能组件中使用相同的代码时，我得到一个错误。这就是我想要的 -

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”。

【问题讨论】：

标签： javascript reactjs state

【解决方案1】：

带有 react-hooks 的状态更新器不提供回调。您需要使用 useEffect 来实现相同的行为。此外，由于您希望 useEffect 仅在更新时运行，您可以在 useRef 的帮助下禁用其初始执行

setCount(prev => prev+1);
...
const initialRender = useRef(true);
useEffect(() => {
   if(!initialRender.current) {
     alert(count);
   } else {
     initialRender.current = false;
   }
}, [count]);

在某些情况下，您可能不希望在 count 更新时触发 useEffect，但仅在从特殊函数更新 count 时触发。在这种情况下，您可以使用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;
}

【讨论】：

感谢您的反馈。我已经在使用 useEffect()。在 useEffect() 中，我正在发送获取请求，以便在数据库更新后从数据库中获取最新计数。所以我认为数据库需要一些时间来更新。会这样吗？
从数据库读取是异步的，在执行useEffect post setCount之前不能保证结果。可能写在数据库中会给你一个承诺，然后你可以使用
您可以在组件中使用多个 useEffect() 实例。因此，请尝试使用“count”作为依赖项创建另一个。
@ShubhamKhatri 那是正确的。谢谢

【解决方案2】：

这里的模式是还使用 useEffect 钩子，其中包含要提醒的状态值的依赖数组。当状态更新时，效果钩子在每次渲染时运行一次，并且依赖数组有助于过滤效果实际触发时，在这种情况下是计数更新时。

const [count, setCount] = useState(0);

useEffect(() => {
  alert('count updated!);
}, [count]);

【讨论】：