React.js中如何基于两个常量数组实现值的乘法运算

核心逻辑说明 #

为每个交易的book_date匹配monthly_rates中生效日期不晚于交易日期的最新乘数，再用该乘数乘以交易的value得到最终结果。

步骤1：编写日期匹配函数 #

先实现一个辅助函数，用于根据交易日期找到对应乘数：

// 根据交易日期获取对应乘数
const getMultiplierByDate = (bookDate, rates) => {
  // 筛选出所有生效日期 <= 交易日期的记录
  const validRates = rates.filter(rate => rate.effective_date <= bookDate);
  if (validRates.length === 0) {
    // 无匹配时默认返回1（可根据业务需求调整）
    return 1;
  }
  // 按生效日期倒序排序，取最新的一条记录的乘数
  validRates.sort((a, b) => new Date(b.effective_date) - new Date(a.effective_date));
  return validRates[0].multiplier;
};

步骤2：处理交易数据并计算结果 #

遍历transactions数组，为每个交易计算最终金额：

import { transactions, monthly_rates } from './your-data-file'; // 替换为实际文件路径

// 批量计算所有交易的最终金额
const processTransactions = () => {
  return transactions.map(transaction => {
    const multiplier = getMultiplierByDate(transaction.book_date, monthly_rates);
    return {
      ...transaction,
      calculated_value: (transaction.value * multiplier).toFixed(2) // 保留两位小数，可按需调整
    };
  });
};

// 调用函数得到处理后的交易数据
const processedTransactions = processTransactions();

步骤3：在React组件中使用 #

在函数组件中展示处理后的计算结果：

import React from 'react';
import { transactions, monthly_rates } from './data'; // 假设数据存放在data.js中

const TransactionCalculator = () => {
  const getMultiplierByDate = (bookDate, rates) => {
    const validRates = rates.filter(rate => rate.effective_date <= bookDate);
    if (!validRates.length) return 1;
    validRates.sort((a, b) => new Date(b.effective_date) - new Date(a.effective_date));
    return validRates[0].multiplier;
  };

  const processedTransactions = transactions.map(transaction => {
    const multiplier = getMultiplierByDate(transaction.book_date, monthly_rates);
    return {
      ...transaction,
      calculated_value: (transaction.value * multiplier).toFixed(2)
    };
  });

  return (
    <div className="transaction-container">
      <h2>交易计算结果</h2>
      <ul>
        {processedTransactions.map((item, index) => (
          <li key={index} className="transaction-item">
            交易日期: {item.book_date} | 原始金额: {item.value} | 乘数: {getMultiplierByDate(item.book_date, monthly_rates)} | 计算后金额: {item.calculated_value}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TransactionCalculator;

示例验证 #

针对你给出的示例交易：

{
  sequence_number: 2,
  book_date: "2020-04-03",
  account_id: 2,
  value: 142592,
}

筛选出effective_date <= "2020-04-03"的记录后，按日期倒序取最新的是2020-04-01对应的乘数1.3，计算结果为142592 * 1.3 = 185369.6，与示例预期一致。

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