useEffect 渲染两次这就是为什么我得到双倍的价值

Question

我想在这里获得 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>
  );
}

Answer 1

useEffect 将在 StriceMode 中被调用两次。 查看更多：为什么useEffect运行两次以及在React中如何处理好？

https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state