如何使用 useState 钩子在 forEach 循环中设置状态 [英] How to set a state in a forEach loop using useState hook

问题描述

我想将数组 A 中的数据传输到对象 B，所以我做了类似 [array].forEach(e => setB({...B, e})) 的事情，但似乎当遍历后面的元素，前面的动作已经忘记"了，我应该如何实现我的目标?
原型应如下所示:

I want to transfer data in an array A into a object B, so i doing something like [array].forEach(e => setB({...B, e})), but it seems like when traversing on later elements, former actions have been "forgotten", how should i achieve my goal?
Prototype should looks like this:

import React from "react"
import {Map} from "immutable"

export default function App() {
    const [arrayA, setA] = React.useState([1, 2]);
    const [objB, setB] = React.useState(Map({}));
    React.useEffect(() => {
        arrayA.forEach(num => {
            setB(objB.set(num, num*num));
        })
    }, [])

    return (<div>null</div>)
}

提前致谢！

推荐答案

你得到了 stale data，你应该像这样使用 setState callback:

You're getting stale data and you should use setState callback like this:

export default function App() {
  const [arrayA, setA] = React.useState([1, 2]);
  const [objB, setB] = React.useState(Map({}));
  React.useEffect(() => {
    arrayA.forEach((num) => {
      setB(oldValue => oldValue.set(num, num * num));
    });
  }, []);

  return <div>null</div>;
}

这篇关于如何使用 useState 钩子在 forEach 循环中设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！