如何在使用更新循环时获得useEffect中的更新状态

Question

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

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不是useffect的依赖项），但如果我将其作为依赖项，它将更新两次。解决这个问题的办法是什么？

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

Answer 1

仅使用setVal一次，而不是在forEach循环期间使用setState是async，因此您不能像它的同步那样依赖它。在您的示例中，setVal将在将来某个时间执行。。您是否有一个codesandbox示例？

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

Answer 2

每当需要使用状态的当前值更新状态时，都需要将函数发送到状态设置器，该设置器会将状态的更新当前值作为参数提供给您。因此，在您的情况下，它将如下所示：

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

useEffect(() => {
  anotherArr.forEach(i => {
    setVal((currVal) => {
      let modifiedValuesArray = [];
      // your update logic here (use currVal instead of val)
      return modifiedValuesArray;
    });
  });
}, []);

Answer 3

我找到了这个答案：(https://stackoverflow.com/a/59422750/2728431)它解决了我的问题。

为了获得更新状态，（正如@usafder在评论中所说），我们需要在箭头函数中传递状态作为值，就像这样：

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

useEffect(() => {
   anotherArr.forEach(i => {
      setVal(val => {
         // modify based on provided val on arrow function
         return modifiedValuesArray
      });
   }

}, []);