Javascript 循环的减少/增加

我有这样一个组件：

...
const STARTING_OPACITY = 0.3;
const STARTING_HEIGHT = ageVariable === 5 ? 70 : 20;
const opacityInterval = (1 - STARTING_OPACITY) / yearlyContr;
const heightInterval = (100 - STARTING_HEIGHT) / yearlyContr;
...

...
return (
    columns.map(
        (column, i) => {
            return(
                <Column height={STARTING_HEIGHT + (heightInterval * getBarsHeight(columns))}  key={`id-${i}`}>
                    <MonthlyContribution>£{column}</MonthlyContribution>
                    <ProgressionBar  
                        opacity={((STARTING_OPACITY + (opacityInterval * i)))}
                    />
                    <AgeContainer>{age + (i * ageVariable)}</AgeContainer>
                </Column>
            );
        }
    )
);
...

柱组件上的高度支柱将逐渐增加，如果阵列是这样，则反之亦然：

[3,2,1]

目前，我总是得到相同的高度属性值。

getBarsHeight需要知道索引，以便为不同的索引提供不同的值=>getBarsHeightcolumns，I:

---

每次都要将变量列传递给getBarsHeight，因此它总是返回相同的值，因为列在不同的循环之间不会改变。此外，本质上，您只是返回i的最后一个值，因此根据数组是否递增，高度将始终为数组的长度-1或0。因此，这个循环不是多余的

[1,2,3]

[3,2,1]

const getBarsHeight = (arr, i) => {
  const isDecreasing = arr[0] > arr[1]
  return isDecreasing ? arr.length - i : i + 1
}