当在循环中创建多个 React 组件并将递增计数器作为 prop 传递时，为什么计数器显示最终值？

Question

I'm trying to understand how closures work in javascript.

Here, I'm iterating through values of the 'items' array using a foreach. I've a let variable "count" declared outside the scope of the foreach loop. After each iteration, the value of 'item' is added to 'count'. Inside the loop, I'm declaring a new React Component that renders the value of "count".

export default function App() {
  const comps: ComponentType<any>[] = [];

  let count = 0;
  const items = [5, 1, 3];

  items.forEach((item) => {
    const countCopy = count;
    comps.push((props) => (
      <div>
        {count} : {countCopy}
      </div>
    ));
    count += item;
  });

  return (
    <div className="App">
      {comps.map((Comp) => (
        <Comp />
      ))}
    </div>
  );
}

But when I run the code, the count value that is showed is its last value (9). I need to create a copy "countCopy" of the variable in order to display its current value. Why is that? Is there a cleaner way?

CodeSandbox:

https://codesandbox.io/s/javascript-closure-question-5uwmm

Answer 1

I've found a solution using reduce instead of foreach:

export default function App() {
  const comps: ComponentType<any>[] = [];

  const items = [5, 1, 3];

  items.reduce<number>((count, item) => {
    const countCopy = count;
    comps.push((props) => (
      <div>
        {count} : {countCopy}
      </div>
    ));
    return count + item;
  }, 0);

  return (
    <div className="App">
      {comps.map((Comp) => (
        <Comp />
      ))}
    </div>
  );
}

The "count" that is rendered is assured to be the current value, since it is declared inside the loop

https://codesandbox.io/s/javascript-closure-question-solution-8ping