useEffect 渲染两次，这就是我获得双倍价值的原因答案

【问题标题】：useEffect render twice that's why i am getting double valueuseEffect 渲染两次，这就是我获得双倍价值的原因
【发布时间】：2023-02-22 20:51:42
【问题描述】：

我想在这里获得 15 个值.. 但是当我使用 Effect 时它给出 30；我想这样做。我知道还有另一种方法，但是如果我有动态价值怎么办。所以，我想知道，我该如何解决这段代码。

function ChildComponent({setSum}) {
  const value = 5;

useEffect(()=>{
  setSum((prev)=> prev + value)
},[setSum, value])

  return (
    <div>
      <p>Random value: {value}</p>
    </div>
  );
}

export default function App() {
  const [sum, setSum] = useState(0);

// i want to get 15 value here.. but when i useEffect it give 30;

  return (
    <div>
        {[1,2,3].map((_, i) => (
          <ChildComponent key={i} setSum={setSum}/>
        ))}
      <p>Sum: {sum}</p>
    </div>
  );
}



export default function App() {
  const [sum, setSum] = useState(0);

// i want to get 15 value here.. but when i useEffect it give 30;

  return (
    <div>
        {[1,2,3].map((_, i) => (
          <ChildComponent key={i} setSum={setSum}/>
        ))}
      <p>Sum: {sum}</p>
    </div>
  );
}

【问题讨论】：

我很确定 useEffect() 不是您在这里需要的钩子。您能否以声明的方式描述您希望此应用程序执行的操作？如果我们知道您想要实现的目标，我们可以更好地帮助您。
假设 3 个子组件随机生成值。所以，我想获得这些值和值的总和。
我将在父组件中初始化一个数组状态。 Array.from(new Array(3), ()=>Math.random()) 并将此状态作为道具发送给孩子。

标签： reactjs react-hooks parent-child