React中动态数组数据的计算与表格展示问题

问题说明 #

现有可在React组件return()中通过.map遍历的数组：

[
    {
        "a": "3",
        "Count": "3",
        "b": "299.98999786376953",
        "c": "30",
        "d": "30"
    },
    {
        "a": "9",
        "Count": "1",
        "b": "99.98999786376953",
        "c": "10",
        "d": "9"
    }
]

需对每个数组元素应用以下公式计算：

a = a/Count;
b = (b/(Count*10))*100;
c = (c/(Count*10))*100;
d = (d/(Count*10))*100;
e = (a+b+c+d)/4;

计算后通过.map渲染为表格行。此前尝试react-equation包（无法获取数组动态变量）及自定义外部函数均未成功，以下是可行解决方法。

核心注意点 #

数组中所有数值均为字符串类型，计算前必须先转换为数字（用parseFloat或Number()），否则会出现字符串拼接而非数值计算的错误。

方法一：遍历中直接计算 #

在.map回调内完成数值转换与计算，逻辑直观：

import React from 'react';

function DataTable() {
  const rawData = [
    { "a": "3", "Count": "3", "b": "299.98999786376953", "c": "30", "d": "30" },
    { "a": "9", "Count": "1", "b": "99.98999786376953", "c": "10", "d": "9" }
  ];

  return (
    <table border="1">
      <thead>
        <tr>
          <th>计算后a</th>
          <th>计算后b</th>
          <th>计算后c</th>
          <th>计算后d</th>
          <th>计算后e</th>
        </tr>
      </thead>
      <tbody>
        {rawData.map((item, idx) => {
          // 字符串转数字
          const a = parseFloat(item.a);
          const count = parseFloat(item.Count);
          const b = parseFloat(item.b);
          const c = parseFloat(item.c);
          const d = parseFloat(item.d);

          // 执行公式计算
          const calcA = a / count;
          const calcB = (b / (count * 10)) * 100;
          const calcC = (c / (count * 10)) * 100;
          const calcD = (d / (count * 10)) * 100;
          const calcE = (calcA + calcB + calcC + calcD) / 4;

          // 渲染行（用idx当key仅作示例，实际建议用唯一标识）
          return (
            <tr key={idx}>
              <td>{calcA.toFixed(2)}</td>
              <td>{calcB.toFixed(2)}</td>
              <td>{calcC.toFixed(2)}</td>
              <td>{calcD.toFixed(2)}</td>
              <td>{calcE.toFixed(2)}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default DataTable;

方法二：抽离外部计算函数 #

将计算逻辑封装成独立函数，让组件代码更简洁，也方便复用和测试：

import React from 'react';

// 封装计算逻辑
const calculateStats = (rawItem) => {
  const a = parseFloat(rawItem.a);
  const count = parseFloat(rawItem.Count);
  const b = parseFloat(rawItem.b);
  const c = parseFloat(rawItem.c);
  const d = parseFloat(rawItem.d);

  const calcA = a / count;
  const calcB = (b / (count * 10)) * 100;
  const calcC = (c / (count * 10)) * 100;
  const calcD = (d / (count * 10)) * 100;
  const calcE = (calcA + calcB + calcC + calcD) / 4;

  return { calcA, calcB, calcC, calcD, calcE };
};

function DataTable() {
  const rawData = [
    { "a": "3", "Count": "3", "b": "299.98999786376953", "c": "30", "d": "30" },
    { "a": "9", "Count": "1", "b": "99.98999786376953", "c": "10", "d": "9" }
  ];

  return (
    <table border="1">
      <thead>
        <tr>
          <th>计算后a</th>
          <th>计算后b</th>
          <th>计算后c</th>
          <th>计算后d</th>
          <th>计算后e</th>
        </tr>
      </thead>
      <tbody>
        {rawData.map((item, idx) => {
          const stats = calculateStats(item);
          return (
            <tr key={idx}>
              <td>{stats.calcA.toFixed(2)}</td>
              <td>{stats.calcB.toFixed(2)}</td>
              <td>{stats.calcC.toFixed(2)}</td>
              <td>{stats.calcD.toFixed(2)}</td>
              <td>{stats.calcE.toFixed(2)}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default DataTable;

为何之前尝试失败？ #

• react-equation的定位是渲染数学公式文本，并非处理动态数据计算，因此无法直接获取数组元素变量。
• 自定义外部函数失败大概率是未处理字符串转数字的步骤，导致计算时出现字符串拼接错误；或是函数调用时未正确传递数组元素参数。

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