React中实现数组累加和判断并更新状态的方法

嗨，我来帮你搞定这个问题！你想要实现的是：对数组元素逐个累加，一旦加上当前元素后的总和超过设定的totalValue就停止，然后把已经累加的元素个数更新到状态里，对吧？

先说说你之前尝试的问题 #

你用map的思路其实不太合适哦：

• map的作用是转换数组的每个元素，它会从头到尾遍历整个数组，没办法中途停止；
• 你写的el + array[index]其实是把当前元素和自己相加（因为index就是当前元素的索引），得到的结果根本不是累加的总和，这也难怪你会觉得混乱啦。

正确的实现思路 #

我们需要的是能中途停止的遍历方式，同时维护两个变量：当前累加的总和、已经累加的元素个数。遍历过程中每次判断：如果加上当前元素会超过totalValue，就立刻停止遍历，最后把元素个数更新到状态里。

具体代码实现（React函数组件） #

方法一：用for循环（最直观）

import { useState, useEffect } from 'react';

function SumCheckComponent() {
  // 定义状态，存储停止时的元素个数
  const [stopCount, setStopCount] = useState(0);
  const targetArray = [70, 180, 70, 70];
  const totalValue = 350;

  useEffect(() => {
    let currentSum = 0;
    let count = 0;

    for (const num of targetArray) {
      // 先判断：加上当前元素会不会超过阈值
      if (currentSum + num > totalValue) {
        break; // 超过就停止循环
      }
      // 没超过就累加，计数加1
      currentSum += num;
      count += 1;
    }

    // 更新状态，对应例子里的3
    setStopCount(count);
  }, []); // 空依赖数组，组件挂载时执行一次

  return (
    <div>
      停止时已累加的元素个数：{stopCount}
    </div>
  );
}

export default SumCheckComponent;

方法二：用数组的some方法（更简洁）

some方法的特性是：只要回调函数返回true，就会立刻停止遍历，刚好符合我们的需求：

import { useState, useEffect } from 'react';

function SumCheckComponent() {
  const [stopCount, setStopCount] = useState(0);
  const targetArray = [70, 180, 70, 70];
  const totalValue = 350;

  useEffect(() => {
    let currentSum = 0;
    let count = 0;

    targetArray.some(num => {
      if (currentSum + num > totalValue) {
        return true; // 返回true，触发停止遍历
      }
      currentSum += num;
      count += 1;
      return false; // 返回false，继续遍历下一个元素
    });

    setStopCount(count);
  }, []);

  return (
    <div>
      停止时已累加的元素个数：{stopCount}
    </div>
  );
}

export default SumCheckComponent;

代码说明 #

• 我们用useEffect来执行这个计算逻辑（空依赖数组保证只在组件挂载时执行一次，如果你需要监听数组或totalValue的变化，可以把它们加到依赖里）；
• 遍历过程中，每次先判断累加当前元素是否会超过阈值，避免先累加再判断导致的错误；
• 最后把计数count更新到状态stopCount里，也就是你想要的结果（对应例子中的3）。

备注：内容来源于stack exchange，提问作者Bouchet