时间戳

首页 > 解决方案 > React JS 等待 useEffect 完成所有渲染

reactjs - React JS 等待 useEffect 完成所有渲染

问题描述

我的反应应用程序中有下一种情况。我有一个从另一个组件设置的状态： const [test, setTest] = useState();，当设置此状态时，它会创建一些渲染，例如：

  1. 第一次渲染test = first value
  2. 第二次渲染test = first value
  3. 最后渲染test = the expected value。
    我想要做的是只读取 useEffect 钩子中的最后一个测试值，例如： 

useEffect(() => {
  // here i need to avoid the previous values of test and to display only the last
  console.log(test);
}, [test]);

问题：如何在 useEffect 内部避免以前的值test并只显示最后一个？

标签： reactjs

解决方案

您可以在 uesEffect 之外初始化一个计数器变量，并在每次运行 useEffect 时递增它。一旦满足所需条件（例如，if(counter===2)），然后运行console.log。

所以

let counter = 0;
useEffect(()=>{
counter++;
if(counter==2){
   console.log(test)
}
},[test])

推荐阅读