使用更新循环时如何在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 不是 useEffect 的依赖项）但如果我将其作为依赖项，它将更新两次。 解决这个问题的方法是什么？

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

Answer 1

setVal只使用一次，而不是在forEach循环中使用。 setState是async所以你不能像它的同步那样依赖它。 在您的示例中， setVal将在将来的某个时间实际执行.. 您是否有一个代码和框示例？

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

Answer 2

我遇到了这个答案:( 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
      });
   }

}, []);

Answer 3

每当您需要使用其当前值更新状态时，您都需要将一个函数发送给状态设置器，该函数将为您提供状态的更新当前值作为参数。 因此，在您的情况下，它将类似于以下内容：

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

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