同API多数据获取逻辑优化及奖励积分计算位置咨询

一、如何从mockData.js获取totalSpend并计算奖励积分 #

假设你的mockData.js数据结构类似以下示例：

// mockData.js
export const mockData = {
  September: {
    users: {
      results: [
        { id: 1, totalSpend: 120 },
        { id: 2, totalSpend: 80 }
      ]
    }
  },
  October: { /* 对应月份的交易数据 */ },
  November: { /* 对应月份的交易数据 */ }
};

1. 导入模拟数据：在App.js中导入mockData

import { mockData } from './mockData';

2. 匹配选中月份的交易数据：用你已经优化后的月份选择逻辑，拿到对应月份的交易列表

const selectedMonth = 'September'; // 替换成你的选中月份变量
const transactions = mockData[selectedMonth]?.users?.results || [];

3. 实现积分计算逻辑：遍历每笔交易的totalSpend，按规则计算单笔积分后累加总和

// 单笔交易积分计算函数
const calculateSingleTransactionPoints = (amount) => {
  let points = 0;
  if (amount > 100) {
    // 超过100的部分每美元2积分，50-100区间每美元1积分
    points += (amount - 100) * 2;
    points += 50 * 1;
  } else if (amount > 50) {
    // 超过50但不超100的部分每美元1积分
    points += (amount - 50) * 1;
  }
  // 50及以下无积分
  return points;
};

// 计算选中月份的总积分
const totalRewardPoints = transactions.reduce((total, item) => {
  return total + calculateSingleTransactionPoints(item.totalSpend);
}, 0);

二、奖励积分计算逻辑的存放位置 #

推荐放在单独工具函数文件（如utils/rewardCalculator.js）或App.js中，不建议放在mockData.js #

原因如下：

• 职责清晰：mockData.js的核心作用是提供模拟数据，承载业务计算逻辑会混淆数据层和业务逻辑层的边界，不利于后续维护。
• 复用性强：如果后续其他组件需要用到积分计算逻辑，单独抽离的工具函数可以直接复用，避免重复编码。
• 维护便捷：若积分规则调整（比如阈值、积分倍率变化），只需修改工具函数，不用改动数据文件，降低维护成本。

如果项目规模极小，仅在App.js中用到积分计算，直接把计算函数写在App.js里也完全可行。

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