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

【问题标题】：How to get updated state in useEffect when using update loop使用更新循环时如何在 useEffect 中获取更新状态
【发布时间】：2021-03-06 04:51:12
【问题描述】：

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

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 的性质，它为我们提供了一个记忆的状态值（因为我们没有将它作为依赖项传递以避免额外的执行），但是在这些类型的场景中解决方案是什么。

【问题讨论】：

您应该只setVal 一次。计算转换后的数组，然后设置它。在那种情况下使用useEffect 有什么重要的原因吗？
@briosheje 实际上真正的代码比这个基本示例复杂得多。但是，是的，当所需的依赖项之一更新时，我需要使用 useEffect 来获得通知。（由于某些原因，我想一一更新索引）
@PouyaJabbarisani 为什么不在setVal 内发送一个箭头函数，它将先前的状态作为参数？

标签： javascript reactjs react-hooks

【解决方案1】：

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

}, []);

【讨论】：

正确。还有一个库允许您使用带有回调的钩子。如果你有兴趣herenpm 链接。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：