React JS中如何正确计算props传递数据的输出总和？

你的问题核心是总和计算逻辑未匹配表格各列的系数规则：表格中每个项目都是原始值乘对应系数后显示，但总和直接相加了原始值，导致结果偏差。同时直接修改props中的user对象也不符合React规范（props为只读属性）。

修正要点： #

• 调整总和计算逻辑：将每个项目的原始值乘以对应系数后再求和，与表格列的计算规则保持一致。
• 避免修改props对象：用临时变量存储计算结果，不要直接给user.total赋值。

修正后的完整代码： #

{props.users.length > 0 ? (
    props.users.map(user => {
      // 计算当前用户的正确总费用
      const totalCost = 
        user.cabang * 25 +
        user.dealer * 40 +
        user.cod * 60 +
        user.jtr * 65 +
        user.gosend * 75 +
        user.reguler * 200;
      return (
        <tr key={user.id}>
          <td>{user.name}</td>
          <td>{user.cabang * 25}</td>
          <td>{user.dealer * 40}</td>
          <td>{user.cod * 60}</td>
          <td>{user.jtr * 65}</td>
          <td>{user.gosend * 75}</td>
          <td>{user.reguler * 200}</td>
          {/* 渲染计算后的正确总和 */}
          <td>{totalCost}</td>
          <td>
            <button
              onClick={() => props.editRow(user)}
              className="button muted-button"
            >
              Edit
            </button>
            <button
              onClick={() => props.deleteUser(user.id)}
              className="button muted-button"
            >
              Delete
            </button>
          </td>
        </tr>
      )
    })
  ) : (
    <tr>
      <td colSpan={9}>No users</td>
      {/* 修正colSpan值：表格共9列，需匹配列数才能占满整行 */}
    </tr>
  )}

修改后计算出的总和会与预期的58625一致，同时也遵循了React的props只读原则，避免了不必要的副作用。

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