Javascript 显示到小数点后两位-React.Js

我试图将计算结果显示为小数点后两位。我创建的函数具有从对象获取属性（“amount”属性）的行为，并将其添加到起始余额（startBal）或将其添加到上一个runningTotal属性（runnigTotal）。完成此计算后，我希望结果显示到小数点后两位，因为这是我正在编写的财务应用程序

我正在尝试使用.toFixed（）方法，但实际上我并没有限制这个方法，我只是希望它能工作

这是我的主要部分。相关函数为addRunningTotal（）

import React，{Component}来自'React'；
从“/TransactionSearch.js”导入TransactionSearch；
从“/PendingTransactions.js”导入PendingTransactions；
从“/Transactions.js”导入事务；
类CheckingAccount扩展组件{
状态={
起点：1000，
未决交易数据：[
{id:0，日期：'1/1/2020'，交易：“天然气”，金额：-25.45}，
{id:1，日期：'1/2/2020'，交易：“手机”，金额：-127.35}，
{id:2，日期：'1/3/2020'，交易：“汽车付款”，金额：-303.97，}，
],
交易数据：[
{
id:0，
日期：“2020年1月1日”，
交易：“天然气”，
金额：-35.45，
runningTotal:空
},
{
id:1，
日期：“2020年1月2日”，
交易：“手机”，
金额：-227.35，
runningTotal:空
},
{
id:2，
日期：“2020年1月3日”，
交易：“汽车付款”，
金额：-403.97，
runningTotal:空
},
]
}
addRunningTotal（）{
让{transactionData，startBal}=this.state
console.log（'start Balance:'，startBal）；
让我们一起跑；
transactionData.map（（el，i）=>{
如果（i==0）{
运行=el.runningTotal=el.amount+startBal；
prevAmount=el.runningTotal；
console.log（running.toFixed（2））
返回运行。toFixed（2）；
}如果（i>0），则为else{
running=el.runningTotal=prevAmount+el.amount；
prevAmount=el.runningTotal；
console.log（running.toFixed（2））
返回运行。toFixed（2）；
}
});
console.log（'映射功能失效'）
console.log（transactionData）；
this.setState（{transactionData:transactionData，startBal:startBal}）；
};
componentDidMount（）{
this.addRunningTotal（）
}
render（）{
设pendTransData=(
悬而未决的交易
日期
交易
数量
{this.state.pendingTransData.map（（pendingTransData，index）=>{
返回
})}
);
设transData=(
事务组件
日期
交易
数量
运行总数
{this.state.transactionData.map（（transactionData，索引）=>{
返回
})}
);
返回(
支票帐户
{pendTransData}
{transData}
);
};
};
导出默认检查科目；

这是我的子组件

import React from 'react';

function Transactions(props) {
  return (
    <tr>
      <td>{props.date} </td>
      <td>{props.transaction}</td>
      <td>{props.amount}</td>
      <td>{props.runningTotal}</td>
    </tr>

  );
}

export default Transactions;

从“React”导入React；
功能事务（道具）{
返回(
{props.date}
{props.transaction}
{props.amount}
{props.runningTotal}
);
}
出口违约交易；

---

我希望看到running total列显示为小数点后两位，但出于某种原因，它显示为小数点后13位。我进一步感到困惑，因为console.log的输出被我使用到小数点后两位

您看到小数点后两位以上的原因是您将

transactionData

的每个元素的

runningTotal

键设置为

running

，而不调用

toFixed

。您可以在日志记录时看到所需的格式，因为您在日志记录时调用

toFixed

为了解决这个问题，我建议将

toFixed

从

runningTotal

计算中完全删除，并且只在

render

方法中使用

toFixed

，因为它应该只用于演示目的

例如：

功能事务（道具）{
返回(
{props.date}
{props.transaction}
{props.amount}
{props.runningTotal.toFixed（2）}
);
}

此外，我建议重构

addRunningTotal

方法，使其更易于阅读，并避免直接的状态操作。例如：

addRunningTotal（）{
const{transactionData，startBal}=this.state；
console.log（'start Balance:'，startBal）；
让运行=启动负载；
const transactionDataWithRunningTotals=transactionData.map（el=>{
运行+=el.金额；
返回{
…呃，
跑步总计：跑步，
}
});
console.log（'映射功能失效'）
console.log（transactionData）；
this.setState（{transactionData:transactionDataWithRunningTotals}）；
}

要在初始渲染时处理此问题，我将更新您的组件，使其看起来像这样：

类检查帐户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
起点：1000，
未决交易数据：[
{id:0，日期：'1/1/2020'，交易：“天然气”，金额：-25.45}，
{id:1，日期：'1/2/2020'，交易：“手机”，金额：-127.35}，
{id:2，日期：'1/3/2020'，交易：“汽车付款”，金额：-303.97，}，
],
transactionData:this.withRunningTotals([
{
id:0，
日期：“2020年1月1日”，
交易：“天然气”，
金额：-35.45，
runningTotal:空
},
{
id:1，
日期：“2020年1月2日”，
交易：“手机”，
金额：-227.35，
runningTotal:空
},
{
import React from 'react';

function Transactions(props) {
  return (
    <tr>
      <td>{props.date} </td>
      <td>{props.transaction}</td>
      <td>{props.amount}</td>
      <td>{props.runningTotal}</td>
    </tr>

  );
}

export default Transactions;