React中如何计算vacancy数组内noOfVacancy字段的总和？

核心实现逻辑 #

用数组的reduce方法可以简洁高效地计算总和，同时能避免for循环容易出现的边界错误。需要注意将noOfVacancy转为数字类型（防止接口返回字符串导致求和异常），并处理数组为空的情况。

1. 编写复用的求和函数

const calculateTotalVacancies = (vacancyList) => {
  // reduce累加，初始值设为0，确保空数组时返回0
  return vacancyList.reduce((total, item) => {
    // 将noOfVacancy转为数字，处理可能的字符串类型，无效值按0处理
    const vacancyCount = Number(item.noOfVacancy) || 0;
    return total + vacancyCount;
  }, 0);
};

2. 获取总和的两种场景

• 原始数据总和：直接传入vacancy数组

  const totalVacancies = calculateTotalVacancies(vacancy);
  

• 搜索过滤后总和：传入filteredResults数组

  const filteredTotal = calculateTotalVacancies(filteredResults);
  

3. 在组件中使用示例

可以直接在JSX中调用，优先使用过滤后的数据（如果有搜索输入）：

<div>总职位空缺数：{calculateTotalVacancies(filteredResults.length > 0 ? filteredResults : vacancy)}</div>

修正你代码中的潜在问题 #

你的useEffect里，setCompanyName(decoded.name)后立刻用companyName作为请求参数会出错——因为React的setState是异步的，此时companyName还是初始空字符串，导致请求参数错误。应该直接用decoded.name：

useEffect(() => {
  const userToken = localStorage.userToken;
  const decoded = jwt_decode(userToken);
  setCompanyName(decoded.name);
  // 直接用解码后的name发起请求，无需等待state更新
  axios
    .get(`http://localhost:5000/vacancy/get/name/${decoded.name}`)
    .then((response) => {
      setVacancy(response.data.exsitingVacancies);
    });
}, []); // 依赖设为空数组，仅初始化时执行一次

你的for循环出错原因 #

大概率是以下两个问题：

• 初始状态vacancy是空数组，循环时访问vacancy[i].noOfVacancy会触发Cannot read properties of undefined错误
• 接口返回的noOfVacancy是字符串类型，直接相加会变成字符串拼接而非数值求和

上面的reduce方法可以同时解决这两个问题。

内容的提问来源于stack exchange，提问作者Chamaka Mendis