时间戳

首页 > 解决方案 > 使用更新循环时如何在 useEffect 中获取更新状态

javascript - 使用更新循环时如何在 useEffect 中获取更新状态

问题描述

所以你可能知道，在正常模式下，我们使用更新依赖项来获取状态更新时的通知，如下所示：

const [val, setVal] = useState();


useEffect(() => {}, [val]]);

但就我而言，我的状态中有一个数组，我试图在我的 useEffect 中循环更新它，如下所示：

const [val, setVal ] = useState([...]);

useEffect(() => {
   anotherArr.forEach(i => {
      // get val and modify some indexes 
      setVal(modifiedValuesArray);
   }
}, []);

在这种情况下，每次 forEach 循环运行时，我都会获得初始 val（我知道因为 val 不是 useEffect 的依赖项），但如果我将其作为依赖项，它将更新两次。解决方案是什么？

编辑：基本上，我的意思是当我在 useEffect 的一轮循环中更新状态时，在下一轮，我没有得到更新的状态，而是进入循环之前的初始状态。而且我知道，这是因为 useEffect 的性质，它为我们提供了一个记忆的状态值（因为我们没有将它作为依赖项传递以避免额外的执行），但是在这些类型的场景中解决方案是什么。

标签： javascriptreactjsreact-hooks

解决方案

仅使用setVal一次，而不是在forEach循环期间使用。setState所以async你不能像同步一样依赖它。在您的示例setVal中实际上将在将来的某个时间执行..您可能有代码沙盒示例吗？

编辑：您不会在“下一轮”获得更新状态。setState将被执行 N 次，并将其放入更新队列中，React 可能只会更新最后一个setState值以进行优化。此外，您的示例useEffect将只运行一次..

推荐阅读